How select default option of dynamically added dropdown list

Question

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.

Well the edited question code works as expected for me. Which browser are you seeing the problem in? — Ma3x
– Ma3x, Commented Jul 25, 2013 at 16:23
I assume 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. Solution: move $("#mysel").val("3"); inside the $.get() {} body. — andyb
– andyb, Commented Jul 25, 2013 at 16:26
@andyb: Probably. He should just post all the relevant code together. But I think that's exactly what is causing this. — Ma3x
– Ma3x, Commented Jul 25, 2013 at 16:32
Added my comment as an answer. I'll leave it up to you whether you want to just delete the whole question or accept an answer. — andyb
– andyb, Commented Jul 25, 2013 at 17:12

mohkhan · Accepted Answer · 2013-07-25 16:16:48Z

2

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");

answered Jul 25, 2013 at 16:16

mohkhan

12.3k2 gold badges27 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mohkhan Over a year ago

try this setTimeout('$("#mysel").val("3")', 1);

Smern Over a year ago

Should avoid trying to hack something using a timeout, you rely on something happening within an arbitrary time and the user can see an item changing after being appended to the dom. This is what callbacks are for.

Smern · Accepted Answer · 2013-07-25 17:56:37Z

1

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);
});

edited Jul 25, 2013 at 17:56

answered Jul 25, 2013 at 16:30

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Comments

andyb · Accepted Answer · 2013-07-25 17:10:50Z

0

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.

answered Jul 25, 2013 at 17:10

andyb

43.9k12 gold badges126 silver badges155 bronze badges

Comments

Wood · Accepted Answer · 2013-07-25 16:19:00Z

0

You need to set the selectedIndex property:

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

answered Jul 25, 2013 at 16:19

Wood

1,7661 gold badge12 silver badges10 bronze badges

3 Comments

exim Over a year ago

I have not access to data that provide index values.

Wood Over a year ago

Then: document.getElementById('mySel').value = 3;

Smern Over a year ago

Other than a slight boost in performance, document.getElementById('mySel').value = 3; wouldn't do anything different than $("#mysel").val("3");

sacbeme · Accepted Answer · 2013-07-25 16:22:35Z

0

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.

answered Jul 25, 2013 at 16:22

sacbeme

351 silver badge8 bronze badges

Comments

Ravinder Gujiri · Accepted Answer · 2013-07-25 16:38:40Z

0

$(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;

answered Jul 25, 2013 at 16:38

Ravinder Gujiri

1,52410 silver badges14 bronze badges

Comments

YashPatel · Accepted Answer · 2013-07-25 16:45:44Z

0

Try this

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

answered Jul 25, 2013 at 16:45

YashPatel

2951 gold badge2 silver badges9 bronze badges

1 Comment

Smern Over a year ago

The problem is that mysel will not be there on ready(). Also, there is no need to add select qualifiers on top of an id as id's are unique. Use #mysel rather than select#mysel.

Collectives™ on Stack Overflow

How select default option of dynamically added dropdown list

7 Answers 7

2 Comments

Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related