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

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

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

Answer 2

此代码适用于显示的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“ 样式 ”更改为“ beerStyle ”。不要使用超常用或保留字作为标识符！

使用Javascript根据以前的下拉选择隐藏/显示下拉菜单

2 个答案: