Question

我有一个可以更改行数的表

<html>
    <head>
    <title>no Title</title>
    <script type="text/javascript">
        //what to do?
    </script>
    </head>
<body>

    <datalist>
        //land
        //water
        //air
        //what to do?
    </datalist>

<table id="animal">
    <tr>
        <th>Animal Category</th>
        <th>Select Animal</th>
    </tr>
    <tr>
        <td>
            <select>
                <option selected>Please select</option>
                <option value="land">Land</option>
                <option value="air">Air</option>
                <option value="water">Water</option>
            </select>
        </td>
        <td>
            <select>
                <option selected>Please select</option>
                //what to do?
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option selected>Please select</option>
                <option value="land">Land</option>
                <option value="air">Air</option>
                <option value="water">Water</option>
            </select>
        </td>
        <td>
            <select>
                <option selected>Please select</option>
                //what to do?
            </select>
        </td>
    </tr>
</table>

<script src="myProject/js/jquery.min.js"></script>
</body>
</html>

比方说，当前有2行，然后每行中都有“选择动物”，可以根据“动物类别”选项进行选择。例如，我在“动物类别”中选择了“土地”，然后在“选择动物”中出现的是->猫，狗，鸡

例如，我有3个列表（土地，空气，水）

land -> cat, dog, chicken, etc
water -> fish, octopus, shrimp, etc
air -> bird, etc

我想放入数据列表中的每个列表，因为它可以更改数量，所以我已经下载了jquery库。我从哪里开始？

Answer 1

最简单的方法是只进行两个选择并在上面添加一些类。然后按类或属性过滤。在这个例子中，我已经上课了。

document.getElementById("main_select").onchange = function(){
  
  let selector = document.getElementById('main_select');
  let value = selector[selector.selectedIndex].value;
    
  let nodeList = document.getElementById("sub_select").querySelectorAll("option");
  
  nodeList.forEach(function(option){
   
   if(option.classList.contains(value)){
      option.style.display="block";
    }else{
      option.style.display="none";
    }
    
  });  
}

<html>
    <head>
    <title>no Title</title>
    </head>
<body>
<table id="animal">
    <tr>
        <td>
            <select id="main_select">
                <option selected>Please select</option>
                <option value="land">Land</option>
                <option value="air">Air</option>
                <option value="water">Water</option>
            </select>
        </td>
        <td>
            <select id="sub_select">
                  <option selected>Please select</option>
                  <option class="land" value="cat">cat</option>
                  <option class="land" value="dog">dog</option>
                  <option class="land" value="chicken">chicken</option>
                  <option class="water" value="fish">fish</option>
                  <option class="water" value="octopus">octopus</option>
            </select>
        </td>
    </tr>
</table>

Answer 2

将动物存储在对象文字中

而且您可能会喜欢：

const categories = {
  land:  ["cat", "dog", "chicken"],
  water: ["fish", "octopus", "shrimp"],
  air:   ["bird", "dragon"]
};
const options = Object.keys( categories ).map(pr => `<option value="${pr}">${pr}</option>`);

$("[data-target]").append( options ).on('change', function() {
  const $targ = $(this.dataset.target).prop("disabled", false);
  $targ.find("option:not(:disabled)").remove(); // Remove all but first option
  $targ.append(categories[this.value].map(val => `<option value="${val}">${val}</option>`)); // Append new options
});

select {text-transform: capitalize;}

<select data-target="#anim"><option selected disabled>Select Category</option></select>
<select id="anim" disabled><option selected disabled>Select animal</option></select>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

根据动态表中的另一个选择选项来选择选项值

2 个答案: