根据先前的下拉选择显示/隐藏下拉项目

Question

- - 按照我第一次错误的描述进行了编辑，抱歉！ - -

嗨，

我正在尝试使用显示/隐藏来根据在第一个下拉菜单中选择的内容来操纵第二个下拉菜单中显示的内容。然而，在它短暂工作之后，它现在不会跨任何浏览器，无论选择什么，它都只会显示它们。 在第一个菜单中选择一个选项后，它需要在第二个菜单中显示特定选项。 每个机场都有自己的一组目的地。不幸的是，这里没有 php/mysql 数据库选项：/

js如下：

$(document).ready(function(){

$("#from_BLANK").click(function () {
        $("#to_A1").show();
        $("#to_A2").show();
        $("#to_A3").show();
    });
    $("#from_A1").click(function () {
        $("#to_A1").hide();
        $("#to_A2").show();
        $("#to_A3").show();
    });
    $("#from_A2").click(function () {
        $("#to_A1").show();
        $("#to_A2").hide();
        $("#to_A3").show();
    });
    $("#from_A3").click(function () {
        $("#to_A1").show();
        $("#to_A2").show();
        $("#to_A3").hide();
    });
});

并且下拉列表上的html如下：

<select name="depApt" id="depApt">
    <option id="from_BLANK" selected="selected">&nbsp;</option>
    <option id="from_A1" value="A1">Airport One</option>
    <option id="from_A2" value="A2">Airport Two</option>
    <option id="from_A3" value="A3">Airport Three</option>
</select>

<select name="dstApt" id="dstApt">
    <option id="to_BLANK" selected="selected">&nbsp;</option>
    <option id="to_A1" value="A1">Airport One</option>
    <option id="to_A2" value="A2">Airport Two</option>
    <option id="to_A3" value="A3">Airport Three</option>
</select>

有明显的错误吗？或者更好的方法来实现这一点？

非常感谢任何和所有帮助！

干杯， 保罗

Answer 1

这是防止两个下拉列表相同的脚本，除了两者都是空白的。如果选择了 A 中的相应选项，则 B 中的选项将始终被禁用。

在 IE8 和 FF3.5 和 Chrome 中测试。

Javascript：

 <script type="text/javascript" >
    $(function() {
    $('#depApt').click(function(){
        var idx = $(this).attr("selectedIndex") + 1;
        $('#dstApt option').removeAttr('disabled');
        if($('#dstApt').attr("selectedIndex") == idx - 1)
          $('#dstApt').attr("selectedIndex", 0)
        $('#dstApt option:nth-child(' + idx + ')').attr('disabled', 'disabled');
      }
    );
    });
  </script>

HTML：

<select name="depApt" id="depApt">
  <option>&nbsp;</option>
  <option value="A1">Airport One</option>
  <option value="A2">Airport Two</option>
  <option value="A3">Airport Three</option>
</select>

<select name="dstApt" id="dstApt">
  <option>&nbsp;</option>
  <option value="A1">Airport One</option>
  <option value="A2">Airport Two</option>
  <option value="A3">Airport Three</option>
</select>

PS：我已经删除了所有选项的 ID，因为我的代码不需要它们，如果需要，将其恢复。

Answer 2

看看我对类似问题的回答：

Removing and adding options from a group of select menus with jQuery

它应该非常适合你，我还在最后提供了一个工作示例的链接。