Retrieving value (not display item) of DropDown

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

Wrong case usage in your onchage event line:

document.getElementByID

Correct:

document.getElementById  

Note that rather than using above; you can alert dropdown value like this too:

onchange="alert(this.value);"

Then for dropdown:

If you add [ ] to the names of elements, they become array eg:

<select name="myselect[]">

Now from php you can access each of its element like this: (assuming that you post method in the form)

echo $_POST['myselect'][0]; // this prints first item value
echo $_POST['myselect'][1]; // this prints second item value
echo $_POST['myselect'][2]; // this prints third item value
//and so on...

Answer 2

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.