Reputation: 626
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
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
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
Reputation: 295
Try this
$(document).ready(function(){
$("select#mysel option").each(function() {
if($(this).text() == '2')
this.selected = true;
});
});
Upvotes: 0
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
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
Reputation: 1766
You need to set the selectedIndex property:
document.getElementById("mySel").selectedIndex = 3;
Upvotes: 0
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