Измените значение «списка» в зависимости от выбранного элемента другого «списка»

Question

У меня есть несколько данных, которые необходимо добавить на вход в зависимости от выбранного значения от другого источника данных. В частности у меня есть собака породы и породы кошек, что мне нужно, чтобы показать, если пользователь либо выбранный тип домашнего животного, как «собака» или «кошка»:

<datalist id="animalTypes"> 
    <option value="Dog"> 
    <option value="Cat"> 
    <option value="Iguana"> 
    <option value="Snake"> 
    <option value="Hamster"> 
    </datalist> 

    <datalist id="defaultbreedvar"> 
    <option value="Select a type"> 
    </datalist> 

    <datalist id="dogvar"> 
    <option value="Pug"> 
    <option value="Labrador"> 
    <option value="Huskee"> 
    <option value="Golden Retreiver"> 
    <option value="Street dog"> 
    </datalist> 

    <datalist id="catvar"> 
    <option value="Angora"> 
    <option value="Persian"> 
    <option value="Bombay"> 
    <option value="Shorthair"> 
    <option value="Street dog"> 
    </datalist> 

Внутри тега формы, то HTML выглядит следующим образом:

<table> 
      <tr> 
      <td>Pet Type</td> 
      <td><input class="dropDown" name="petType" id="petType" list="animalTypes" ></td> 
      </tr> 
      <tr> 
      <td>Pet Type Variation</td> 
      <td><input class="dropDown" name="petSubType" id="petSubType" list="defaultbreedvar" ></td> 
      </tr> 
      <tr> 
      <td>Pet Name</td> 
      <td><input type="text" name="petName" id="petName"></td> 
      </tr> 
     </table> 

и код JQuery, который выбирает, какой список данных показан выглядит следующим образом:

$(document).ready(function() 
{ 
    function selectPetBreed() 
    { 
     var petType = $("#petType").attr("value"); 
     if (petType == "Dog"){ 
      $("#petSubType").attr("list","dogvar"); 
     }; 
     if (petType == "Cat"){ 
      $("#petSubType").attr("list","catvar"); 
     } 

    }; 
    $(document).on("change, keyup", "#petType", selectPetBreed); 
}); 

, но это не меняет мой список показано, это всегда порода DataList по умолчанию жёстко. Благодаря!

Answer 1

FIDDLE HERE

изменение

$(document).on("change, keyup", "#petType", selectPetBreed); 

к

$('input').bind("change", selectPetBreed); 

и изменить

var petType = $("#petType").attr("value"); 

к

var petType = ("#petType").val();