HTML

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

Second Dropdonw Values （在上面的下拉菜单中选择的02:00应该如下所示）

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

非常感谢上面提供的任何javascript

并使用以下脚本作为Salman Suggested

<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解决方案and demo。

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/

使用可用对数组

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

AJAX +数据库对

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

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

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

[编辑]

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

javascript根据另一个下拉列表更改下拉列表值

3 个答案:

HTML

的JavaScript