根据另一个“列表”的选定元素更改“列表”值

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