I am trying to append a value with jQuery but with the ways I am trying the option doesn't want to append. This is what I am trying (for test purposes):

 $('#<%=btnSelectAgentAdd.ClientID %>').click(function () {              
                var myOptions = {
                    val1: 100,
                    val2: 'text2'
                };
                $('#<%=ddlAgentName.ClientID %>').append(new Option(myOptions.val2, myOptions.val1));             
             });

I also tried this:

 $('#<%=btnSelectAgentAdd.ClientID %>').click(function () {
                var mySelect = $('#<%=ddlAgentName.ClientID %>');
                var myOptions = {
                    val1: 100,
                    val2: 'text2'
                };
                $.each(myOptions, function(val, text) {
    $('#<%=ddlAgentName.ClientID %>').append( new Option(text,val) );
});           
             });

And this:

 $('#<%=btnSelectAgentAdd.ClientID %>').click(function () {
                var mySelect = $('#<%=ddlAgentName.ClientID %>');
                var myOptions = {
                    val1: 100,
                    val2: 'text2'
                };
                $.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
             });

None of them are working. Debugging with Firebug shows that the error is happening on the last step when the values are to be appended to the dropdownlist.

I am trying to append a value with jQuery but with the ways I am trying the option doesn't want to append. This is what I am trying (for test purposes):

 $('#<%=btnSelectAgentAdd.ClientID %>').click(function () {              
                var myOptions = {
                    val1: 100,
                    val2: 'text2'
                };
                $('#<%=ddlAgentName.ClientID %>').append(new Option(myOptions.val2, myOptions.val1));             
             });

I also tried this:

 $('#<%=btnSelectAgentAdd.ClientID %>').click(function () {
                var mySelect = $('#<%=ddlAgentName.ClientID %>');
                var myOptions = {
                    val1: 100,
                    val2: 'text2'
                };
                $.each(myOptions, function(val, text) {
    $('#<%=ddlAgentName.ClientID %>').append( new Option(text,val) );
});           
             });

And this:

 $('#<%=btnSelectAgentAdd.ClientID %>').click(function () {
                var mySelect = $('#<%=ddlAgentName.ClientID %>');
                var myOptions = {
                    val1: 100,
                    val2: 'text2'
                };
                $.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
             });

None of them are working. Debugging with Firebug shows that the error is happening on the last step when the values are to be appended to the dropdownlist.

• javascript
• jquery
• asp
• jquery-ui
• drop-down-menu

3 Answers 3

Try like this:

$.each(myOptions, function (val, text) {
    mySelect.append($('<option />', {
        value: val,
        text: text
    }));
});

FIDDLE DEMO

var newOption = "<option value='"+"1"+"'>Some Text</option>"; 
$("#ddlCategory").append(newOption);

Reference How do I add an option to a dropdown list using jQuery?

try this

$('#<%=btnSelectAgentAdd.ClientID %>').click(function () {
                var mySelect = $('#<%=ddlAgentName.ClientID %>').append('<option value="100">yourtext</option><option value="100">yourtext</option>');

             });