组合框依赖于另一个


Combo box dependent on another

我想这样做,当选择F时,楼层组合框只显示A1和B1,当选择K时,只显示A2和B2。

Garage     : <select name="garage">
<option value="F">F</option>
<option value="K">K</option>
</select><br />
Floor      : <select name="floor">
<option value="A1">A1</option>
<option value="B1">B1</option>
<option value="A2">A2</option>
<option value="B2">B2</option>
</select><br />

好的,这是解决方案,重新编辑,刚刚测试:

<script>
function garage_onchange(){
    var selGarageValue = document.getElementById("garage").value;
    var selFloor = document.getElementById("floor");
    for(var i=selFloor.options.length-1;i>=0;i--){
        selFloor.remove(i);
    }
    if(selGarageValue=="F"){
        var option = document.createElement('option');
        option.text = "A1";
        option.value="A1";
        selFloor.add(option);
        option = document.createElement('option');
        option.text = "B1";
        option.value="B1";
        selFloor.add(option);
    }
    else if(selGarageValue=="K"){
        var option = document.createElement('option');
        option.text = "A2";
        option.value="A2";
        selFloor.add(option);
        option = document.createElement('option');
        option.text = "B2";
        option.value="B2";
        selFloor.add(option);
    }
}
</script>
Garage: 
<select id="garage" name="garage" onchange="garage_onchange();">
<option value="S" selected="selected">-Choose Garage-</option>
<option value="F">F</option>
<option value="K">K</option>
</select>
<br />
Floor: 
<select name="floor" id="floor">
</select>

如果希望立即进行选择,请使用javascript。

Html:

Garage     : <select name="garage" id="garage">
<option value="F">F</option>
<option value="K">K</option>
</select><br />
Floor      : <select name="floor" id="floor">
<option value="A1">A1</option>
<option value="B1">B1</option>
</select><br />

Javascript:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$("#garage").change(function () {
    var val = $(this).val();
    if (val == "F") {
        $("#floor").html("<option value='A1'>A1</option><option value='B1'>B1</option>");
    } else if (val == "K") {
        $("#floor").html("<option value='A2'>A2</option><option value='B2'>B2</option>");
    }
});
</head>

要在PHP应用程序中实现这一点,只需将上述代码放入html的<head>部分即可。

相关文章: