Изменить FORM SELECT (выпадающее меню) в зависимости от других выпадающих в JS / Jquery

Question

У меня есть форма с двумя раскрывающимися меню, и я хочу, чтобы выбираемые значения во втором раскрывающемся меню менялись в зависимости от того, что выбрано с помощью первого раскрывающегося меню

Это одно раскрывающееся меню:

<select name="cat" id="1">
   <option>MAMMAL</option>
   <option>REPTILE</option>
   <option>BIRD</option>
</select>

И в зависимости от выбора, я сразу хочу, чтобы отображалась одна из этих форм:

<select name="type" id="type1">
   <option>CAT</option>
   <option>DOG</option>
</select

<select name="type" id="type1">
   <option>SNAKE</option>
   <option>LIZARD</option>
</select

<select name="type" id="type1">
   <option>HEN</option>
   <option>ROBIN</option>
</select

Форма предназначена для нескольких записей, поэтому существует много строк, число идентификаторов которых увеличивается с каждым разом.Мой jQuery до сих пор:

$(document).ready(function()
{
   $(".cat").live("click", function(event)
   {      
     cid=event.target.id;
     catchosen = event.target.value;

     switch (catchosen)
     {
        case 'MAMMAL':
        case 'REPTILE':
        case 'BIRD':
        return {}
     };
     event.preventDefault();
  });  
});

Как изменить / заменить значения в раскрывающемся списке на jQuery?

Answer 1

Во-первых, если вы используете селектор $(".cat"), у вас должен быть первый блок выбора для класса cat. Но всегда хорошо выбирать, используя id в этом случае. И я бы посоветовал вам использовать событие change вместо события click при обнаружении изменения опции выбора в первом поле выбора.

Вы можете использовать функцию .empty() jquery, чтобы очистить опции 2-го выпадающего списка, а затем использовать .append(), чтобы добавить новые опции.

Что-то вроде

$("#type1").empty(); //clear all options
$("#type1").append('<option value="CAT">CAT</option>');

Answer 2

Дайте отдельные идентификаторы на ваш выбор.т.е. тип1, тип2 и тип3.Измените свой сценарий следующим образом.

$(document).ready(function()
{
   $(".cat").live("click", function(event)
   {
     catchosen = this.value;
     $("#type1, #type2, #type3").hide();
     switch (catchosen)
     {
        case 'MAMMAL':
            $("#type1").show();
            break;
        case 'REPTILE':
            $("#type2").show();
            break;
        case 'BIRD':
            $("#type3").show();
            break;
     };
  });  
});