Q:

Retrieve HTML drop down list value with AJAX

I have an HTML dropdown list which i'm populating from a database. My question is how can i retrieve the value of a selected item from this dropdown list using AJAX? 
My javascript:
<script type = "text/javascript">
function getData(str){
var xhr = false;
if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest();
    } 
    else {

        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xhr) {
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("div1").innerHTML = xhr.responseText;
            }
        }
        xhr.open("GET", "/display-product.php?q="+str, true);
        xhr.send(null);
    }
}
</script>

The dropdown list in display-product.php:
<div>
      <?php
       echo '<select title="Select one" name="selectcat" onChange="getData(this.options[this.selectedIndex].value)">';
       while($row1 = $result->fetch_assoc()){            
       echo '<option value="' . $row1['id'] . '">' . $row1['category'] . '</option>';
        }
       echo '</select>';
        ?>
        </div>

The div to display the selected item:
<div class="product_directory" id="div1"></div>

I'm not very conversant with AJAX. I tried to access the "str" variable passed to the getData function in my PHP script using "$string = $_GET['q']" but still didn't work. Thanks in advance for the help.
UPDATE: i was able the figure out the source of the problem: I have two functions that populate the select lists from the database. When a user selects an option from the first dropdown(with id="categoriesSelect"), the second one(id = "subcatsSelect") is automatically populated. Here is the code for both functions:
<script type="text/javascript">
<?php
echo "var categories = $jsonCats; \n";
echo "var subcats = $jsonSubCats; \n";
?>
function loadCategories(){
    var select = document.getElementById("categoriesSelect");
    select.onchange = updateSubCats;
    for(var i = 0; i < categories.length; i++){
      select.options[i] = new Option(categories[i].val,categories[i].id);          
    }
}
function updateSubCats(){
    var catSelect = this;
    var catid = this.value;
    var subcatSelect = document.getElementById("subcatsSelect");
    subcatSelect.options.length = 0; //delete all options if any present
    for(var i = 0; i < subcats[catid].length; i++){
      subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
    }
  }
</script>

The code works fine if i manually put  in the select list . But using these two functions to pull from the database, nothing is displayed. I call the loadCategories() function like this
<body onload = "loadCategories()">.
The other select box is very similar to this one.
 I don't know the specific issue but i know it's coming either from loadCategories() or updateSubCats().

A:

It seems your code is retrieving the value on the select. But it fails on your function.
I tried using that open function Here. But, in my side it didn't work using an slash (/). So, try to remove that and try it.
...
 xhr.open("GET", "display-product.php?q="+str, true);

...
EDIT: full working code...
<script type = "text/javascript">
function getData(str){
var xhr = false;
if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest();
    } 
    else {

        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xhr) {
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("div1").innerHTML = xhr.responseText;
            }
        }
        xhr.open("GET", "display-product.php?q="+str, true);
        xhr.send(null);
    }
}
</script>

<select title="Select one" name="selectcat" onChange="getData(this.options[this.selectedIndex].value)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<div id="div1"></div>

... on display-product.php
echo $_GET['q'];

Try this for the edited part of your question.
And this other to make it work together. 
Hope this helps.

