Question

我想这样做，当选择F时，Floor组合框仅显示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 />

Answer 1

好的，这是解决方案，已经过测试，只是经过测试：

<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>

Answer 2

如果您想立即进行选择，请使用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>部分。

组合框依赖于另一个

2 个答案: