CODEWITHSUNDEEP
javascriptjqueryhtml
exim
exim

Reputation: 626

How select default option of dynamically added dropdown list

I get a string like from server using jquery:

<option value='1'>1</option><option value='2'>2</option>
<option value='3'>3</option><option value='4'>4</option>

then I create a dropdown within a div:

$.get('server.php', function(data) {
    $('#mydiv').html('<select id="mysel" name="mysel">'+data+'</select>');
});

problem is that when I create this, I want to select one option so:

$("#mysel").val("3");

but doesn't work! if I add an alert before calling this line, then this works!

alert('test');
$("#mysel").val("3");

can not find what is problem.

NOTE: I can not change the way I get data from server.

Upvotes: 1

Views: 2356

Answers (7)

Smern
Smern

Reputation: 19086

You need to use get()'s callback. You can use the success one you already have: 

$.get('server.php', function(data) {
    $('#mydiv').html('<select id="mysel" name="mysel">'+data+'</select>');
    $("#mysel").val("3");
});

or you can use done:

$.get('server.php', function(data) {
    $('#mydiv').html('<select id="mysel" name="mysel">'+data+'</select>');
}).done( function() { "#mysel").val("3") });

Edit: actually, rather than adding something to the dom and then modifying it, it would be better to modify before inserting.

$.get('server.php', function(data) {
    $mysel = $('<select id="mysel" name="mysel">'+data+'</select>').val("3");
    $("#mydiv").append($mysel);
});

Upvotes: 1

andyb
andyb

Reputation: 43823

Assuming the line $("#mysel").val("3"); is outside of the $.get() {}...

The response from $.get is asynchronous so the $("#mysel").val("3"); executes before the HTML <option> elements are added.

Adding the alert() delays the execution long enough for the <option> to exist in that scenario.

The simplest solution here is to move the $("#mysel").val("3"); inside the $.get() {} body.

Upvotes: 0

YashPatel
YashPatel

Reputation: 295

Try this

$(document).ready(function(){
   $("select#mysel option").each(function() { 
       if($(this).text() == '2')
          this.selected = true;
   });
});

Upvotes: 0

Ravinder Gujiri
Ravinder Gujiri

Reputation: 1524

$(document).ready(function(e) {
    $.get('server.php',{dataType:'text/html'}, function(data) {
         $('#mydiv').html('<select id="mysel" name="mysel">'+data+'</select>');
         $("#mysel").val("3");
    })
});

try the above code;

Upvotes: 0

sacbeme
sacbeme

Reputation: 35

Try:

$("#mysel option:selected").val("3");

And if you want to set the text try:

$( "#mysel option:selected" ).text("3");

But you must declare this after your dropdown is created in the DOM tree.

Upvotes: 0

Wood
Wood

Reputation: 1766

You need to set the selectedIndex property:

document.getElementById("mySel").selectedIndex = 3;

Upvotes: 0

mohkhan
mohkhan

Reputation: 12335

You are not providing the right id. Your select's id is mysel and you are trying to select an option in mydiv. Change 

$("#mydiv").val("3");

to

$("#mysel").val("3");

Upvotes: 2

Related Questions