javascript根据其他下拉列表更改下拉列表值

Question

我有一个要求当选择下拉值时，它必须过滤或删除其他下拉列表的值，该下拉列表的索引应始终大于第一个下拉列表的选定索引。

例如： 首次下拉值：

01:00
01:30
02:00 // suppose i select 02:00 here
02:30
03:00
03:30
04:00
04:30
05:00
05:30

第二个Dropdonw值 （在上面的下拉列表中选择的02:00应该如下所示）

（我在这里使用带有Asp.net的C＃。）

任何上面要实现的JavaScript都将非常感激

并使用如下Salman建议的脚本

<body onload="select()">
<script language="javascript">
function select(){
var select1 = document.getElementById("ddlFrom");
var select2 = document.getElementById("ddlTo");
select1.onchange = function filterDDL() {     // empty select2
while (select2.firstChild) {
select2.removeChild(select2.firstChild);
  }     
 if (select1.selectedIndex == 0)
  { 
  return; 
    }
  for (var i = select1.selectedIndex; i < select1.options.length; i++)
   {  
    var o = document.createElement("option");
    o.value = select1.options[i].value;
    o.text = select1.options[i].text;
    select2.appendChild(o);

      }
   } 
}</script>

但没有工作......请提前帮助谢谢

Answer 1

编辑（使用jQuery获得所需的结果）：

<select id="one">
    <option value="01:00">01:00</option>
    <option value="01:30">01:30</option>
    <option value="02:00">02:00</option>
    <option value="02:30">02:30</option>
    <option value="03:00">03:00</option>
    <option value="03:30">03:30</option>
</select>

<select id="two"></select>

<script type="text/javascript">
    $(function () {
        $("#one").change(function (e) {
            $("#two").empty();

            var options = 
            $("#one option").filter(function(e){
                return $(this).attr("value") > $("#one option:selected").val();
            }).clone();

            $("#two").append(options);
        });
    });
</script>

Answer 2

Vanilla JavaScript解决方案和演示。

HTML

<select name="select1" id="select1">
    <option value="">-- select an option --</option>
    <option value="01:00">01:00</option>
    <option value="01:30">01:30</option>
    <option value="02:00">02:00</option>
    <option value="02:30">02:30</option>
    <option value="03:00">03:00</option>
    <option value="03:30">03:30</option>
    <option value="04:00">04:00</option>
    <option value="04:30">04:30</option>
    <option value="05:00">05:00</option>
    <option value="05:30">05:30</option>
</select>
<select name="select2" id="select2">
</select>

JavaScript的

// this function must be wrapped inside onload event
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
select1.onchange = function() {
    // empty select2
    while (select2.firstChild) {
        select2.removeChild(select2.firstChild);
    }
    if (select1.selectedIndex == 0) {
        return;
    }
    for (var i = select1.selectedIndex; i < select1.options.length; i++) {
        var o = document.createElement("option");
        o.value = select1.options[i].value;
        o.text = select1.options[i].text;
        select2.appendChild(o);
    }
}

Answer 3

有多种方法可以实现这一点，每种方法都可能适用于不同的用途。

按值过滤

@Craig已经建议了。 提供下拉选项值。 当在第一个中选择某些内容时，从第二个下拉列表中删除低于或等于其值的值： http ： //jsfiddle.net/q8mLH/

使用可用对的数组

创建一个您感兴趣的对数组，然后当select 1更改时，根据您允许的数组中定义的内容更新select2可用选项： http ： //jsfiddle.net/AU6hq/

AJAX +数据库对

我不打算在这里说明一个例子，抱歉，但总的想法是：你需要在数据库中有一些表，比如说“国家”和“城市”，每个国家都有一个ID，每个城市有自己独特的ID加上它所在国家的ID。 您可能希望仅显示所选国家/地区的城市。

将change（）事件绑定到县选择并通过ajax调用加载第二个选择的内容，查询数据库中所选国家/地区的城市。

可能会有更多，但我不太想今天想太多;）。 无论如何，我希望这会有所帮助。

[编辑]

我的例子使用jQuery，我希望这不是问题。

javascript根据其他下拉列表更改下拉列表值

问题描述

3 个解决方案

解决方案1
2 已采纳 2011-05-13 10:30:25

解决方案2
1 2011-05-13 10:41:45

HTML

JavaScript的

解决方案3
0 2011-05-13 10:56:03

javascript根据其他下拉列表更改下拉列表值

问题描述

3 个解决方案

解决方案1 2 已采纳 2011-05-13 10:30:25

解决方案2 1 2011-05-13 10:41:45

HTML

JavaScript的

解决方案3 0 2011-05-13 10:56:03

解决方案1
2 已采纳 2011-05-13 10:30:25

解决方案2
1 2011-05-13 10:41:45

解决方案3
0 2011-05-13 10:56:03