The below code snippet explains how to add option to HTML SELECT Dropdown using jQuery
<input type="button" id="demo" value = "Demo" /><br />
<select id="mySelect"></select>
 
<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    var fruits = new Array();
    fruits[0] = { Text: "Mango", Value: "1" };
    fruits[1] = { Text: "Banana", Value: "2" };
    fruits[2] = { Text: "Orange", Value: "3" };
    fruits[3] = { Text: "Grapes", Value: "4" };
    $("#demo").live("click", function () {
        //Clear the HTML Select DropdownList
        $("#mySelect option").remove();
 
        //Add Default Option
        $("#mySelect").append(GetOption("Please select fruit", "0"));
 
        //Loop through array and add options
        $.each(fruits, function (index) {
            $("#mySelect").append(GetOption(fruits[index].Text, fruits[index].Value));
        });
    });
    function GetOption(text, value) {
        return "<option value = '" + value + "'>" + text + "</option>"
    }
</script>
 
Explanation:
There’s an array of fruits already which needs to be populate in the HTML select dropdown. Click event handler has been attached to then HTML button with Id “demo”. A function named GetOption has been created which returns the HTML of the HTML Select option
 When the button is clicked, first the HTML select dropdown is cleared, then a default option is added and finally a jQuery each loop is executed which iterates through the array and then one by one adds item to the HTML Select Dropdown