I'm trying to use a .load to dynamically create a <select> dropdown, and then within the callback function, set the option of the just-created select. I had this:
$("div#system").load('systemdata.php',null,function() {
document.getElementById('systemid').selectedIndex=0;
});
The systemdata.php script outputs this:
<label for="systemid">System:</label>
<select id='systemid' name='system'>
<option value='54TH-01'>54TH-01</option>
<option value='54TH-02'>54TH-02</option>
<option value='54TH-03'>54TH-03</option>
</select>
The <DIV> it loads into looks like this:
</div>
I'm fairly new to jQuery, so I haven't gotten used to the shortened syntax yet. Someone suggested I change it to this:
$("div#system").load('systemdata.php',null,function() {
$("#systemid").attr('selectedIndex',0);
});
The first method using the document.getElementById fails, claiming getElementById('systemid') is null. The method using the jQuery ($"#systemid").attr() succeeds.
What is the real difference here between the two?