用AJAX做下拉框级联

下拉框级联可以通过AJAX实现。具体实现步骤如下：

1. 在HTML页面中定义下拉框

<select id="firstSelect" onchange="getSecondSelect()">
    <option value="">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>

<select id="secondSelect">
    <option value="">请选择</option>
</select>

2. 编写AJAX代码

function getSecondSelect(){
    var firstSelectValue = document.getElementById('firstSelect').value;
    var url = "getSecondSelect.php?firstSelectValue=" + firstSelectValue;
    
    //创建XMLHttpRequest对象
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //发起AJAX请求
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('secondSelect').innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

3. 编写后台PHP代码

$firstSelectValue = $_GET['firstSelectValue'];
$sql = "SELECT * FROM second_select WHERE first_select_value = $firstSelectValue";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
    echo "<option value='" . $row['second_select_value'] . "'>" . $row['second_select_name'] . "</option>";
}

以上代码完成了下拉框的级联，当第一个下拉框的选项改变时，会发起AJAX请求，后台PHP代码会根据选项的值查询数据库，返回第二个下拉框的选项列表。前台JS代码会将返回的选项列表填充到第二个下拉框中。