Get the correct Index without duplicating the Select Option

Question

Get the correct Index without duplicating the Select Option

Navigation

#1 by (3 votes)
#2 by (0 votes)

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>

javascript html jquery

asked by anonymous 09.09.2015 / 21:57

2 answers

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

Product upgrade issue Find the index of an array that matches a regular expression

score 3 · Accepted Answer

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>";
}