Fatal编程技术网
  • javascript/
  • javascript根据其他下拉列表更改下拉列表值

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

javascript

javascript根据其他下拉列表更改下拉列表值,javascript,Javascript,我有一个要求，当选择一个下拉列表值时，它必须过滤或删除其他下拉列表的值，这些下拉列表的索引应始终大于第一个下拉列表的选定索引 Ex：第一个下拉列表值： 上述下拉列表中所选02:00的第二个Dropdonw值应如下所示 02:30 03:00 03:30 04:00 04:30 05:00 05:30 我在这里使用C和Asp.net 如能使用javascript实现上述功能，将不胜感激 按照萨尔曼的建议，使用下面的脚本 <body onload="select()"> <scr

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

Ex：第一个下拉列表值：

上述下拉列表中所选02:00的第二个Dropdonw值应如下所示

02:30
03:00
03:30
04:00
04:30
05:00
05:30
我在这里使用C和Asp.net

如能使用javascript实现上述功能，将不胜感激

按照萨尔曼的建议，使用下面的脚本

<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>
但不起作用…请帮忙
提前感谢

使用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>
香草JavaScript解决方案

HTML JavaScript
实现这一点有多种方法，每种方法可能适合不同的用途

按值筛选

@克雷格已经提出了。给出下拉选项的值。在第一个下拉列表中选择某个对象后，将从第二个下拉列表中删除小于或等于该对象值的值：

使用可用对的数组

创建您感兴趣的配对数组，然后在更改“选择1”时，根据允许配对数组中定义的内容更新“选择2”可用选项：

AJAX+数据库对

抱歉，我不打算在这里具体说明一个例子，但总体思路是：您的数据库中需要有一些表，比如国家和城市，每个国家都有一个ID，每个城市都有自己的唯一ID加上所在国家的ID。您可能只想显示所选国家/地区的城市

将更改事件绑定到Countrys select，并通过ajax调用加载第二个select的内容，查询数据库中所选国家的城市

可能还有更多，但我今天不想想想太多；。不管怎样，我希望这有帮助

[编辑]

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

您使用的是jQuery之类的javascript框架还是纯javascript？如果您使用的是一个框架，那么就更容易了。您能进一步说明我如何能够绑定这两个DDL之间的关系吗？谢谢，我想我不应该再给select2下拉列表提供选项，我已经将上面的脚本包装在一个函数中并放在body onload上了……仍然没有use@Jam：jsFiddle上的演示成功了吗？链接在我的答案的顶部 
<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>

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

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