在没有AJAX的情况下改变显示

Display changing without AJAX

本文关键字：情况下 改变 显示 AJAX      更新时间：2023-09-26

我有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应该显示。下拉值也从数据库中提取由于

只有有限的选项可以这样做

  • OnChange事件
  • 经典html/javascript/post refresh

一种选择是以标准形式(如JSON)加载数据库中的所有内容。然后，您必须编写javascript，以便在用户与每个项目交互时动态地构建下拉菜单。

这里有一个例子，你如何去做http://jsfiddle.net/9Z5t8/1/

有一些缺点。如果你有大量的数据(数百条记录)要传输，这将是缓慢的，但它是可以的，对于一些记录。

您可以将选项保存在单独的数组中，并在选择值时插入适当的选项: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);
    }
    }
};
相关文章：