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

Question

在 Jquery 或 Mootools（最好是 mootools）中寻找答案 - 但我有 2 个“隐藏”下拉菜单和一个显示。

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

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

当前设置实际上在用户第一次加载页面时起作用 - 如果他们从第一个下拉列表中选择了某些内容，则会在第二个下拉列表中显示相应的列表。如果他们回去改变它，什么都不会发生。我确定这与我的 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（隐藏 - 如您所见）：

<div id="Ale"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Kind of Ale?</label>
    <select>
      <option value="">-Choose An Ale-</option> 
      <option value="American Ale">American Ale</option>
      <option value="Belgian / French Ale">Belgian / French Ale</option>
      <option value="English Ale">English Ale</option>
      <option value="Finnish Ale">Finnish Ale</option>
      <option value="German Ale">German Ale</option>
      <option value="Irish Ale">Irish Ale</option>
      <option value="Russian Ale">Russian Ale</option>
      <option value="Scottish Ale">Scottish Ale</option>
    </select>
</div>
<div id="Lager"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Kind of Lager?</label>
    <select>
    <option value="">-Choose A Lager-</option>
      <option value="American Lager">American Lager</option>
      <option value="Czech Lager">Czech Lager</option>
      <option value="European Lager">European Lager</option>
      <option value="German Lager">German Lager</option>
      <option value="Japanese Lager">Japanese Lager</option>
    </select>
</div>
<div id="Hybrid"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Kind of Hybrid?</label> 
    <select>
    <option value="">-Choose A Hybrid-</option>
      <option value="Fruit / Vegetable Beer">Fruit / Vegetable Beer</option>
      <option value="Herbed / Spiced Beer">Herbed / Spiced Beer</option>
      <option value="Smoked Beer">Smoked Beer</option>
    </select>
</div><div class="clear"></div><div id="error-message-style-sub-1"></div></div>

Answer 1

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

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

See it in action at jsFiddle.

~~~
对于 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“style”更改为“beerStyle”。不要使用超常用或保留字作为标识符！

Answer 2

使用 JQuery 你可以试试下面的代码

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