Question

Hi I have two dropdowns and I am populating second one on the basis of first one. My first select is

<select name="projects" id="projects" onchange="populate_users(this.value);">
<option value='1'>ABC</option>
<option value='2'>DEF</option>
</select>

And I populate second select box on the basis of first one which is

<select name="users" id="users">
</select>

Here is my populate_users method

function populate_users(project_id)
{
var url='<?php echo($this->url(array(),'admin/clientproject1'));?>';
url2=url+'project_id='+project_id;
//alert(url2);
jQuery('#users').html('<div style="position:absolute;">'+jQuery('#users').html());
//ajax call
jQuery.ajax({url:url2,success:function(data){jQuery('#users').html(data);}});
}

And on admin/clientproject1 I simply query to table and start a loop to draw options like this

$rd=$db->fetchAll($q);
for($i = 0; $i < count($rd); $i++)
{
    ?>
    <option value="<?php echo($rd[$i]->id);?>">
    <?php echo($rd[$i]->username);?></option>
    <?php
}
?>

$rd is having values. The second select is populated and all values are showing in
Firefox but in IE it is just showing blank dropdown and not showing any error.

Answer 1

You should return a json string of values and create the option elements in javascript. Then inject those option elements into your select. A bit more coding, but it’s better.