javascript - 使用来自数据库的 javascript 值根据第一个更改第二个下拉值

Question

我试图在两个下拉列表中从数据库中获取值，如果我从第一个下拉列表中选择任何选项，第二个下拉列表应该填充与该字段相关的数据库值，直到现在我已经完成了这个。我应该在哪里提及我的数据库详细信息，以便它从数据库值中获取。

 <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

它基本上涉及处理您的 onChange 事件 首先，为两个选择元素添加唯一 id

有关代码详细引用，请参阅 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]);
        }
    }
}