Question

I am filling DropDown dynamically using AJAX. The DropDown code looks like this:

<select class="element select medium" id="inDistrict" name="inDistrict" onclick="MakeRequest('divDistrict', 'inDistrict', 'SELECT * FROM districtmaster');" onchange="alert(document.getElementByID('inDistrict').value);"> 
    <option value="Select" selected="Select">Select</option>
</select>

Another file that executes on AJAX request contains following code:

<?php
    require("dbconnection.php");
    require("dbaccess.php");

    $dropdownControlName = $_GET['DropDownControlName'];
    $query = $_GET['SqlQuery'];
    dbconnection::OpenConnection();
    $result = dbaccess::GetRows($query);
?>
<select name="<?php echo $dropdownControlName; ?>">
<option>Select from the list</option>
<?php while($row=mysql_fetch_array($result))
{ ?>
    <option value="<?= $row[0] ?>"><?= $row[1] ?></option>
<?php } ?>
</select>

Everything works fine and the DropDowns also get filled, except that I am not following how to pick the value of the Option. In the above code you can see that I am using row[0] as value and row[1] as the display item. I want to pick the row[0] value whenever a user selects any row[1] display item.

In the first code above, you can see that I added an onchange event and there is just an alert box. But it is not executing. How to pick the row[0] value and why onchange event is not firing?

Answer 1

onchange doesn’t fire in response to DOM manipulation of the selected value. You can fire it manually with some simple javascript:

var inDistrict = document.getElementById('inDistrict');
if (inDistrict.onchange)
  inDistrict.onchange();

If you’re using jQuery, it’s even easier:

$('#inDistrict').change();

Since it looks like you’re replacing the entire dropdownlist with your ajax request, just throw some of that javascript in there to fire the change event when it’s done populating, and you should be good to go.