我正在尝试创建一系列3个链式选择，其中进一步选择被隐藏，直到选择前一个。 我正在使用插件链接选择并尝试为隐藏部分添加我自己的代码。
示例：
3个链接选择
1 - 可见 2 - 隐藏 3 - 隐藏
当我从1中选择一个选项时，会显示2个适当的选项并显示。问题是3也在显示。当2改变时，设置3。当1更改时，插件在技术上会更改2，因为它会填充相应的选项（链）。
插件会自动禁用选择框，直到前一个选择框对其进行选择，所以我试图找出隐藏禁用选择框的内容（这样我就不必使用onchange / div了）但到目前为止，我没有把这一个搞得一团糟。
是否有办法隐藏已禁用的元素（选择框）并在插件启用时显示它们？
或者有没有办法阻止插件触发显示下一个div的onchange事件？ （允许插件填充选择而不进行更改会触发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>
这是插件的代码：
/* jshint -W098 */
/*
* Chained - jQuery / Zepto chained selects plugin
*
* Copyright (c) 2010-2013 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* http://www.appelsiini.net/projects/chained
*
* Version: 0.9.8
*
*/
;(function($, window, document, undefined) {
"use strict";
$.fn.chained = function(parent_selector, options) {
var settings = $.extend( {}, $.fn.chained.defaults, options);
return this.each(function() {
/* Save this to self because this changes when scope changes. */
var self = this;
var backup = $(self).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
$(self).html(backup.html());
/* If multiple parents build classname like foo\bar. */
var selected = "";
$(parent_selector).each(function() {
if ($(":selected", this).val()) {
selected += "\\" + $(":selected", this).val();
}
});
selected = selected.substr(1);
/* Zepto class regexp dies with classes like foo\bar. */
if (window.Zepto) {
selected = selected.replace("\\", "\\\\");
}
/* Also check for first parent without subclassing. */
/* TODO: This should be dynamic and check for each parent */
/* without subclassing. */
var first;
if ($.isArray(parent_selector)) {
first = $(parent_selector[0]).first();
} else {
first = $(parent_selector).first();
}
var selected_first = $(":selected", first).val();
$("option", self).each(function() {
/* Remove unneeded items but save the default value. */
if (!$(this).hasClass(selected) &&
!$(this).hasClass(selected_first) && $(this).val() !== "") {
$(this).remove();
}
});
/* If we have only the default value disable select. */
if (1 === $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
$(self).trigger("change");
});
/* Force IE to see something selected on first page load, */
/* unless something is already selected */
if (!$("option:selected", this).length) {
$("option", this).first().attr("selected", "selected");
}
/* Force updating the children. */
$(this).trigger("change");
});
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.chainedTo = $.fn.chained;
/* Default settings for plugin. */
$.fn.chained.defaults = {};
})(window.jQuery || window.Zepto, window, document);
编辑：所选答案对我来说非常合适，但有以下变化：
$(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();
}
});
});
答案 0 :(得分：0)
您可以在显示select之前检查change处理程序中是否启用了div ...
$(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();
}
});
});