Question

- - 编辑，因为我第一次错误地描述了它，抱歉！ - -

您好，

我正在尝试使用show / hide来操作第二个下拉菜单中显示的内容，具体取决于在第一个下拉菜单中选择的内容。然而，在简单地工作之后，它现在不会跨任何浏览器，它只是显示所有浏览器，无论选择什么。 当在第一个菜单中选择一个选项时，它需要在第二个菜单中显示特定选项。每个机场都有自己的一组目的地。不幸的是，没有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

看看我给出的类似问题的答案：

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

它应该对你有用，我最后还提供了一个工作实例的链接。

Answer 2

这是一个脚本，可以防止两个下拉列表都是空白的。如果选择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，因为我的代码不需要它们，如果需要还原它。

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

2 个答案: