JQuery – Preencher Dropdown com os dias da semana

Vamos a mais um exemplo de preenchimento de dropdown. Desta vez vamos preencher nosso dropdown com os dias da semana

Implemente um dropdown e atribua a ele um identificador para poder manipulá-lo:

<select id="daysOfTheWeek"><select>

Em seu arquivo de script, implemente um vetor contendo os dias da semana. Implementar um vetor permitirá que você possa aproveitar estes valores futuramente.

var daysOfWeekNames = [
    'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'
];

Agora implemente uma função como no exemplo abaixo que tem como objetivo usar o vetor criado para preencher dinamicamente o dropdown.

function loadDaysOfTheWeek() {
    var dropdown = $('#daysOfTheWeek');
    dropdown.empty();
    dropdown.prop('selectedIndex', 0);

    $.each(daysOfWeekNames, function (key, entry) {        
        var option = $('<option />');
        option.attr('value', key+1).text(entry);
        dropdown.append(option);
    });
}

Por fim, implemente a chamada para a função. Esta chamada você pode implementar no local que seja melhor para seu contexto. Aqui estou fazendo a chamada assim que o documento estiver completamente carregado.

$(document).ready(function () {
   loadDaysOfTheWeek();    
});