CODEWITHSUNDEEP
javascriptinternet-explorerjquerydrop-down-menu
rahul
rahul

Reputation: 7663

jQuery val() not working in IE for dynamically added option

I am generating options for my dropdown by jQuery ajax method, filling it by db. 

$.ajax({
        type: "POST",
        url: pageUrl + '/FillAssignee',
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
                        for (var i = 0; i < response.d.length; i++) {
                            $('#SelectAssignee').append($("<option></option>").val(response.d[i]['Value']).html(response.d[i]['Text']));
                        }
                        if (response.d.length > 0) 
                        {
                          $('#SelectAssignee>option:eq(1)').attr('selected', true); 
                          alert($('#SelectAssignee').val()); //this line giving me correct value but value not showing in dropdown as selected in ie
                        }
                  }            
      });

It's works fine. only problem is that first value not got selected by default on IE. So for that I used many options 

1. $('#SelectAssignee').val();
2. $('#SelectAssignee option:first').attr('selected','selected');
3. $('#SelectAssignee option:first').prop('selected',true);

How can I get it work?

Upvotes: 5

Views: 3333

Answers (7)

Checksum
Checksum

Reputation: 3240

Try setting the value explicitly to the value of the first option

$('#SelectAssignee').val(response.d[0]['Value']);

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this

 var selObj = document.getElementById('SelectAssignee');
 selObj.selectedIndex = 0;

Upvotes: 1

Ram Lakhan Yadav
Ram Lakhan Yadav

Reputation: 31

After the for loop, try following condition 

if (response.d.length > 0) { $('#SelectAssignee>option:eq(0)').attr('selected', 'selected');}

Upvotes: 0

Abhilash
Abhilash

Reputation: 1610

My best guess is that this should work. Although, this seems like a dirty hack, there was an occasion when I had to resort to this and it worked.

setTimeout( function() {
    $('#SelectAssignee option:first').prop('selected', true);
    $('#SelectAssignee').trigger('change');
}, 1000 );

Try putting this code block in the success callback, after the for loop.

Upvotes: 0

Sooraj
Sooraj

Reputation: 41

Could you please try below solution.

After the for loop, just add this

if (response.d.length > 0) {
   $('#SelectAssignee>option:eq(1)').attr('selected', true);
}

Upvotes: 0

Starx
Starx

Reputation: 78971

Try setting as attributes rather than properties.

$('#SelectAssignee').append($("<option />", { value: response.d[i]['Value'], html: response.d[i]['Text'] }));

Upvotes: 0

Bryan
Bryan

Reputation: 6752

Your logic is saying that you are targeting the FIRST element in your select menu, however, you are adding the new option to the END of the select input. You either need to change your .append to .prepend, or target the last option when setting the selected attribute to true

Upvotes: 0

Related Questions