Get the correct Index without duplicating the Select Option

Question

I need to create a select with the days of the week, and upload them when they are already in the database, then I receive in my index the id of the day of the week and I have to leave it as selected, I am doing so, but the same 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>

Answer 1

Uses the .selectedIndex which does just that: chooses the index of option selected, assigning the desired number to that property. Note that the index starts at 0, then you can just use:

select.selectedIndex = index - 1;

The whole code would be like this, and using good practices of not mixing 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: http://jsfiddle.net/2xb08pzd/

If you want to maintain the standard of string in return of this function you can use one of these alternatives:

#1 - http://jsfiddle.net/2xb08pzd/4/ (JS pure)

#2 - http://jsfiddle.net/2xb08pzd/6/ (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>";
}

Answer 2

It is repeating because you are leaving fixed in the first position the selected day.

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

Following 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>