Скрыть / показать выпадающие списки на основе предыдущего выпадающего списка с помощью 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

Этот код будет работать для двух указанных уровней:

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

Смотрите его в действии на 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 ();
} )

Обратите внимание, что я изменил идентификатор " style " на" beerStyle ".Не используйте супер-общие или зарезервированные слова в качестве идентификаторов!

Answer 2

Используя JQuery, вы можете попробовать следующий код

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