Jquery链接选择隐藏/显示问题_Jquery_Select_Onchange_Chained

Jquery链接选择隐藏/显示问题

jquery select

Jquery链接选择隐藏/显示问题,jquery,select,onchange,chained,Jquery,Select,Onchange,Chained,我正在尝试创建一系列的3个链式选择，进一步的选择将隐藏，直到选择上一个。我正在使用链接选择的插件，并试图为隐藏部分添加我自己的代码例如： 3链式选择 1-可见 2-隐藏 3-隐藏当我从1中选择一个选项时，2将填充相应的选项并显示出来。问题是3也在显示。3设置为在更改2时显示。插件技术上会在1更改时更改2，因为它填充了相应的选项链插件会自动禁用选择框，直到上一个选择框被选中为止，所以我试图找出隐藏禁用的选择框的位置，这样我就不必使用onchange/div了，但到目前为止，我还没有找到这个

我正在尝试创建一系列的3个链式选择，进一步的选择将隐藏，直到选择上一个。我正在使用链接选择的插件，并试图为隐藏部分添加我自己的代码

例如：

3链式选择

1-可见 2-隐藏 3-隐藏

当我从1中选择一个选项时，2将填充相应的选项并显示出来。问题是3也在显示。3设置为在更改2时显示。插件技术上会在1更改时更改2，因为它填充了相应的选项链

插件会自动禁用选择框，直到上一个选择框被选中为止，所以我试图找出隐藏禁用的选择框的位置，这样我就不必使用onchange/div了，但到目前为止，我还没有找到这个选项

有没有办法隐藏禁用的元素选择框，并在插件启用时显示它们

或者有没有办法阻止插件触发显示下一个div的onchange事件？允许插件填充select而无需该更改触发onchange事件

这是代码。多谢各位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head> 
    <title>SoSleep: V1</title> 

<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

    <script src="./code/jquery-1.10.2.min.js"></script>
    <script src="./code/jquery.mobile-1.3.1.min.js"></script>

    <script>

$(document).ready(function(){
    $(".2").hide();

  $(".destination").change(function(){
    $(".2").show();
  });
});

$(document).ready(function(){
    $(".3").hide();

  $(".guide").change(function(){
    $(".3").show();
  });
});

</script>

    </head>

<body>

<div id="sosleep">

<div class="1">
<h2>Destination</h2>
<select class="destination" name="Destination">
  <option value="" selected="selected">Destination</option>
  <option value="southern">Southern Sleep</option>
  <option value="city">City Sleep</option>
</select>
</div>

<div class="2">
<h2>Guide</h2>
<select class="guide" name="Guide">
  <option value="" selected="selected">Guide</option>
  <option value="jay" class="southern">Jay</option>
  <option value="annie" class="southern">Annie</option>
  <option value="aron" class="city">Aron</option>
  <option value="sally" class="city">Sally</option>
    <option value="none" class="southern city">None</option>
</select>
</div>

<div class="3">
<h2>Background</h2>
<select class="background" name="Background">
  <option value="" selected="selected">Background</option>
  <option value="Crickets" class="jay annie none">Crickets</option>
  <option value="Traffic" class="aron sally none">Traffic</option>
  <option value="Rain" class="jay annie aron sally none">Rain</option>
  <option value="None" class="jay annie aron sally">None</option>
</select>
</div>



</div>

  <xscript src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="./code/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">

  $(function() {

    /* For jquery.chained.js */
    $(".guide").chained(".destination");
    $(".background").chained(".guide");

    });

  </script>

</body>

</html>

编辑：所选答案非常适合我，但有以下更改：

$(document).ready(function () {
    $(".2").hide();
    $(".destination").change(function () {
        if ($(".guide").is(":enabled")) {
            $(".2").show();
        }
    });
});

$(document).ready(function () {
    $(".3").hide();
    $(".guide").change(function () {
        if ($(".background").is(":enabled")) {
            $(".3").show();
        }
    });
});

在显示div之前，您可以检查在更改处理程序期间是否启用了select

也许您可以添加一个JSFIDLE资源。谢谢！我做了一个小小的修改，这是我为那些像我一样，可能会花几个小时来寻找答案，寻找一些对他们有帮助的人而附加的。工作起来很有魅力！代码$document.readyfunction{$.2.hide；$.destination.changefunction{if$.guide.is:enabled{$.2.show；}；}$document.readyfunction{$.3.hide；$.guide.changefunction{if$.background.is:enabled{$.3.show；}；}；

$(document).ready(function () {
    $(".2").hide();
    $(".destination").change(function () {
        if ($(".guide").is(":enabled")) {
            $(".2").show();
        }
    });
});

$(document).ready(function () {
    $(".3").hide();
    $(".guide").change(function () {
        if ($(".background").is(":enabled")) {
            $(".3").show();
        }
    });
});

$(document).ready(function () {
    $(".2").hide();
    $(".destination").change(function () {
        if ($(".2 select").is(":enabled")) {
            $(".2").show();
        }
    });
});

$(document).ready(function () {
    $(".3").hide();
    $(".guide").change(function () {
        if ($(".3 select").is(":enabled")) {
            $(".3").show();
        }
    });
});