使用Javascript根据先前的下拉列表选择隐藏/显示下拉列表

最好在Jquery或Mootools中寻找答案——但我有两个“隐藏”下拉列表，其中一个显示

一旦用户从显示的下拉列表中选择选项，我希望显示相应的下拉列表。一旦他们从第二个列表中做出选择，相应的第三个列表就会出现

如果用户返回并在第一个下拉列表中更改其选择，则所有其他下拉列表应返回隐藏状态，第二个下拉列表应显示

当前设置实际上在用户第一次加载页面时起作用-如果他们从第一个下拉列表中选择了某些内容，则会在第二个下拉列表中显示相应的列表。如果他们回去改变它，什么也不会发生。我确信这与我的Javascript有关，因为我对它不是很在行。只是想找人帮忙

以下是我当前的JS：

var lastList = "";
function ChangeDropdowns(listName){
//hide last div
if (lastList) {
document.getElementById('lastList').style.display='none';
}
//value box is not nothing & object exists - change class to display
if (listName && document.getElementById(listName)){
document.getElementById(listName).style.display ='block';
lastList=listName;
}
}

我当前的HTML看起来是这样的：我只包括了第一个和第二个下拉列表，第三个只是进一步细分

加载页面时显示的下拉列表1：

<div class="ccms_form_element cfdiv_custom" id="style_container_div">
<label>Beer Style:</label><select size="1" id="style" class=" validate['required']" title="" type="select" name="style" onchange="ChangeDropdowns(this.value)">
<option value="">-Choose A Style-</option>
<option value="Ale">Ale</option>
<option value="Lager">Lager</option>
<option value="Hybrid">Hybrid</option>
</select><div class="clear"></div><div id="error-message-style"></div></div>

下拉列表2隐藏-如您所见：

---

使用JQuery，您可以尝试以下代码

$("#style").change(function(){
   $("select").not("#style").hide();
   $("#"+$(this).val()).show();
});

---

此代码适用于所示的两个级别：

$("#beerStyle").change ( function () {
    var targID  = $(this).val ();
    $("div.style-sub-1").hide ();
    $('#' + targID).show ();
} )

~~~ 对于3级下拉列表，代码变为：

$("#beerStyle").change ( function () {
    var targID  = $(this).val ();
    $("div.style-sub-1, div.style-sub-2").hide ();
    $('#' + targID).show ();
} )

$("div.style-sub-1 select").change ( function () {
    /*--- These option values are too non-standard to double as safe id's.
        Change the values of the option tags to something safe for id's or 
        add a rel attribute to hold the id's.
    */
    var targID  = $(this).val ();
    $("div.style-sub-2").hide ();
    $('#' + targID).show ();
} )

---

注意，我将id样式更改为beerStyle。不要使用超公用或保留字作为标识符

看起来它会工作-但是当我使用你的代码时，什么都没有发生。这给了我一个不错的起点，谢谢！如果你能想到其他的东西-请让我知道。这段代码基本上隐藏了所有的下拉列表，然后只显示选定的下拉列表。确保代码中使用的选择器与标记中使用的选择器完全相同。如果您有任何其他id或类别，请使用这些id或类别。最后一行的第二行缺少双引号，请尝试我编辑的答案。

$("#beerStyle").change ( function () {
    var targID  = $(this).val ();
    $("div.style-sub-1, div.style-sub-2").hide ();
    $('#' + targID).show ();
} )

$("div.style-sub-1 select").change ( function () {
    /*--- These option values are too non-standard to double as safe id's.
        Change the values of the option tags to something safe for id's or 
        add a rel attribute to hold the id's.
    */
    var targID  = $(this).val ();
    $("div.style-sub-2").hide ();
    $('#' + targID).show ();
} )