我有一个要求当选择下拉值时，它必须过滤或删除其索引应始终大于第一个下拉菜单的选定索引的其他下拉菜单的值。javascript根据其他下拉菜单更改下拉值

例：第一个下拉值：

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应该如下）

（IM使用C＃与Asp.net在这里。）

任何JavaScript实现VE以上将不胜感激

，并使用脚本如下的萨尔曼建议

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

，但没有工作...请

来源

2011-05-13 Jam

你使用的是JavaScript框架，如jQuery或只是普通的JavaScript？如果你使用框架，它更容易。 – 2011-05-13 10:29:48

编辑（使用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>

来源

2011-05-13 10:30:25 Craig

可否请您进一步详细说明，我将如何能够绑定这两个DDL之间的关系'，谢谢 – Jam 2011-05-13 10:34:37

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); 
    } 
}

来源

2011-05-13 10:41:45

所以，我想我不应该再给选择select2下拉选项，我已经包装在一个函数上面的脚本，并放在body onload ...仍然没有使用 – Jam 2011-05-13 13:04:37

@Jam：在jsFiddle上的演示是否奏效？（链接在我的答案的最顶部） – 2011-05-13 14:57:48

@salmanA感谢您的小提琴。真的很酷:) – mtk 2012-06-24 16:35:08

有多种方式来实现这一点，每一个可能很适合不同的使用率。按值

@Craig

筛选已经暗示它。给出下拉选项值。当事情在第一个选中后，值低于或等于其值从第二个下拉删除：http://jsfiddle.net/q8mLH/

使用可对

数组创建你自己感兴趣的对数组，那么，当选择1改变时，基于什么是你允许对数组中定义更新选择2可用的选项：http://jsfiddle.net/AU6hq/

AJAX +数据库对

我不打算在这里指定一个例子，对不起，但总的想法是这样的：你需要在你的数据库中有一些表，比如说“国家”和“城市”，每个国家都有一个ID，每个城市有自己的唯一ID加上它所在国家的ID。您可能只想显示所选国家/地区的城市。

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

可能还有更多，但我不觉得今天想太多;）。无论如何，我希望这有助于。

[编辑]

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

来源

2011-05-13 10:56:03 mingos

javascript根据其他下拉菜单更改下拉值

回答

HTML

的JavaScript

相关问题