Changing 2nd dropdown values according to 1st using javascript values coming from database

Question

I am trying to get values form database in two drop downs where, If i choose any option from 1st drop down the 2nd drop down should be populated with the database values related to that field and till now I have done this. where should I mention about my database details so that it fetch from database values.

 <label> List of Tables : </label><br>
<form name="myform" id="myForm">
    <select name="optone" id="jobSelect" size="1">
        <option value="" selected="selected">Select job</option>
    </select>
    <br>
    <br>
    <select name="opttwo" id="attrSelect" size="1">
        <option value="" selected="selected">Select attribute</option>
    </select>
</form>

<script> // AJAX Implementation
function showJobs() {
    str = document.getElementById("jobs").value;
    str1 = document.getElementById("attributes").value;
    if (str == "" || str1 == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "listCourseByAjax.php?p=" + str + "&q=" + str1, true);// **DONOT KNOW WHAT TO DO HERE AS I am not using php I m using java**
    xmlhttp.send();
}
</script>

Answer 1

It basically involves handling onChange event on your For beginning, add unique id to both select element

For code detail reference see DEMO .

HTML

<form name="myform" id="myForm">
    <select name="optone" id="stateSel" size="1">
        <option value="" selected="selected">Select state</option>
    </select>
    <br>
    <br>
    <select name="opttwo" id="countySel" size="1">
        <option value="" selected="selected">Please select state first</option>
    </select>
    <br>
    <br>
    <select name="optthree" id="citySel" size="1">
        <option value="" selected="selected">Please select county first</option>
    </select>
</form>
<hr/>
<a href="http://jsfiddle.net/mplungjan/mfuusp9p/" target="_blank">Version 2 has autoselect of single options</a>

JS

var stateObject = {
    "California": {
        "Monterey": ["Salinas", "Gonzales"],
        "Alameda": ["Oakland", "Berkeley"]
    },
    "Oregon": {
        "Douglas": ["Roseburg", "Winston"],
        "Jackson": ["Medford", "Jacksonville"]
    }
}
window.onload = function () {
    var stateSel = document.getElementById("stateSel"),
        countySel = document.getElementById("countySel"),
        citySel = document.getElementById("citySel");
    for (var state in stateObject) {
        stateSel.options[stateSel.options.length] = new Option(state, state);
    }
    stateSel.onchange = function () {
        countySel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        var cities = stateObject[stateSel.value][this.value];
        for (var i = 0; i < cities.length; i++) {
            citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
        }
    }
}