jquery - 根据另一个 "list"的选定元素更改 "list"值

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);
});

但这并没有改变我显示的列表，它始终是硬编码的默认品种数据列表。谢谢!

Answer 1

FIDDLE HERE

改变

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

到

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

和改变

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

到

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