Get the correct Index without duplicating the Select Option

1

I need to create a select with the days of the week, and load them when they are already in the database, so I get in my index the id of the day of the week and I have to leave it as selected , I'm doing this, however it gets duplicated.

$("body").append(diasHorario(2)); // seleciona Terça

function diasHorario(index) {
  var dias = Array('Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo');

  var result = "<select id='diasHorario' class='form-control'>" +
    "<option value=" + index + "> " + dias[index - 1] + "</option>" +
    "<option value='1'>Segunda</option>" +
    "<option value='2'>Terça</option>" +
    "<option value='3'>Quarta</option>" +
    "<option value='4'>Quinta</option>" +
    "<option value='5'>Sexta</option>" +
    "<option value='6'>Sábado</option>" +
    "<option value='7'>Domingo</option>" +
    "</select>";
  return result;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
asked by anonymous 09.09.2015 / 21:57

2 answers

3

Use the .selectedIndex that does just that: choose the index of option selected, assigned the desired number to this property. Note that the index starts at 0 , so you can simply use:

select.selectedIndex = index - 1;

The whole code would look like this, and using good practices not to mix HTML in the middle of JavaScript:

$("body").append(diasHorario(2)); // seleciona Terça

function diasHorario(index) {

    var select = document.createElement('select');
    select.id = 'diasHorario';
    select.classList.add('form-control');

    var dias = ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'];
    dias.forEach(function (dia, i) {
        var option = document.createElement('option');
        option.value = i + 1;
        option.innerHTML = dia;
        select.appendChild(option);
    });

    select.selectedIndex = index - 1;
    return select;
}

jsFiddle: link

If you want to keep the string pattern on the return of this function you can use one of these alternatives:

# 1 - link (pure JS)

# 2 - link (concatenating HTML)

function diasHorario(index) {
    var dias = Array('Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo');
    return dias.reduce(function (str, dia, i) {
        return str + ['<option value="', i + 1, '" ', i == index - 1 ? 'selected="selected"' : '', '>', dia, '</option>'].join('')
    }, "<select id='diasHorario' class='form-control'>") + "</select>";
}
    
09.09.2015 / 22:05
0

You are repeating why you are setting the selected day to the first position.

What you should do is check on each item whether the passed value is equal to the index of the day.

Here's an example:

$("body").append(diasHorario(2)); // seleciona Terça

function diasHorario(index) {
  var dias = Array('Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo');

  var result = "<select id='diasHorario' class='form-control'>" +
    "<option value='1'" + (index == 1 ? "selected" : "") + ">Segunda</option>" +
    "<option value='2'" + (index == 2 ? "selected" : "") + ">Terça</option>" +
    "<option value='3'" + (index == 3 ? "selected" : "") + ">Quarta</option>" +
    "<option value='4'" + (index == 4 ? "selected" : "") + ">Quinta</option>" +
    "<option value='5'" + (index == 5 ? "selected" : "") + ">Sexta</option>" +
    "<option value='6'" + (index == 6 ? "selected" : "") + ">Sábado</option>" +
    "<option value='7'" + (index == 7 ? "selected" : "") + ">Domingo</option>" +
    "</select>";
  return result;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
09.09.2015 / 22:35