Shah-Combox-Option-Population

Here you can learn different ways of populating Option of Combobox from a list

by Md Shah

HTML

<h3>Option 1:</h3>

<p style="text-indent:10px; ">District:
    <select id='mySelectOpt1'></select>
</p>

<h3>Option 2:</h3>

<p style="text-indent:10px; ">District:
    <select id='mySelectOpt2'></select>
</p>

<h3>Option 3:</h3>

<p style="text-indent:10px; ">District:
    <select id='mySelectOpt3'></select>
</p>

<h3>Option 4:</h3>

<p style="text-indent:10px; ">District:
    <select id='mySelectOpt4'></select>
</p>

<h3>Option 5:</h3>

<p style="text-indent:10px; ">District:
    <select id='mySelectOpt5'></select>
</p>

<h3>Option 6:</h3>

<p style="text-indent:10px; ">District:
    <select id='mySelectOpt6'></select>
</p>

JavaScript

$(document).ready(function () {

    var myOptions = [{
        val: "",
        text: "None Chosen"
    }, {
        val: "946",
        text: "Cincinnati"
    }, {
        val: "948",
        text: "Columbus"
    }]; // note no comma after the last object

    /* jQuery - Option 1 */
    $.each(myOptions, function (ind, obj) {
        $('#mySelectOpt1').append(new Option(obj['text'], obj['val']));
    });

    /* jQuery - Option 2 */
    $.each(myOptions, function (i, item) {
        $('#mySelectOpt2').append($('<option>', {
            value: item.val,
            text: item.text
        }));
    });

    /* jQuery - Option 3 */
    var html = '';
    for (var i = 0, len = myOptions.length; i < len; ++i) {
        html += '<option value="' + myOptions[i]['val'] + '">' + myOptions[i]['text'] + '</option>';
    }
    $('#mySelectOpt3').append(html);
});

var Districts_List = [{
    val: "",
    text: "None Chosen"
}, {
    val: "946",
    text: "Cincinnati"
}, {
    val: "948",
    text: "Columbus"
}];

window.onload = function () {

    /* Javascript - Option 4 */
    var mySelect = document.getElementById("mySelectOpt4");

    for (var i = 0; i < Districts_List.length; i++) {

        var opt = new Option(Districts_List[i].text, Districts_List[i].val);

        mySelect.add(opt);
    }

    /* Javascript - Option 5 */
    var mySelect = document.getElementById("mySelectOpt5");

    for (var i = 0; i < Districts_List.length; i++) {

        var opt = document.createElement("option");
        opt.value = Districts_List[i].val;
        opt.text = Districts_List[i].text;

        mySelect.add(opt);
    }

    /* Javascript - Option 6 */
    var mySelect = document.getElementById("mySelectOpt6");

    for (var i = 0; i < Districts_List.length; i++) {

        var opt = document.createElement("option");
        opt.value = Districts_List[i].val;
        opt.text = Districts_List[i].text;

        mySelect.options[i] = opt;
    }
}