javascript - 使用 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”。不要使用 super 常见或保留字作为标识符!