Question

我有2个下拉列表，第二个下拉列表的值应根据在第一个下拉列表中选择的值进行更改。当前的下拉列表是。

<select name="first">
        <option name="a" value="a">a</option>
        <option name="b" value="b">b</option>
        <option name="c" value="c">c</option>
</select>

<select name="second">
       <option name="a1" value="a1">a1</option>
       <option name="a2" value="a2">a2</option>
       <option name="b1" value="b1">b1</option>
       <option name="b2" value="b2">b2</option>
       <option name="c1" value="c1">c1</option>
       <option name="c2" value="c2">c2</option>
</select>

我希望根据在第一个下拉列表中选择的值显示第二个下拉列表，即，如果首先选择“a”，则应仅显示a1和a2。还会从数据库中提取下拉值感谢

Answer 1

这样做的选择有限

OnChange事件
经典html / javascript / post refresh

Answer 2

您可以将选项保存在单独的数组中，并在选择值时插入适当的选项：http://jsfiddle.net/KTQ7d/。

var arr = [];
var first_select = document.getElementsByTagName('select')[0]
var second_select = document.getElementsByTagName('select')[1]
var elems = second_select.getElementsByTagName('option');
for(var i = 0; i < elems.length; i++) {
    arr.push(elems[i].value);
}
first_select.onchange = function() {
    second_select.innerHTML = '';
    for(var i = 0; i < arr.length; i++) {
    if(arr[i][0]
       ==
       first_select.options[first_select.selectedIndex].value) {
        var opt = document.createElement('option');
        opt.name = arr[i];
        opt.value = arr[i];
        opt.innerHTML = arr[i];
        second_select.appendChild(opt);
    }
    }
};

Answer 3

一种选择是以标准格式（如JSON）加载数据库中的所有内容。然后，当用户与每个项目交互时，您必须编写javascript以动态构建下拉列表。

以下是您如何进行http://jsfiddle.net/9Z5t8/1/

的示例

有一些缺点。如果您要传输大量数据（数百条记录），这将会很慢，但是对于一些记录来说也没问题。

无需AJAX即可显示更改

3 个答案: