Javascript jquery自动填充从数组中选择选项

我将总共有4个下拉列表。我想首先创建3个数组，下拉列表是硬编码的，根据在第一个数组中选择的内容，填充第二个下拉列表。如何根据第一个选择筛选出显示的内容？我已经知道第二、第三、第四菜单的所有选项。以下是我的想法：

var secondDropdown = ['Cat|c1|1','Dog|d1|1','Banana|b1|2','Apple|a1|2','Car|c2|3','Boat|b2|3'] // here's where i'm lost. How do I create an array that has 3 values. first is the display text, second is the value and third is the filter.

<select id="menu1">
<option value="1">First Option</option>
<option value="2">Second Option</option>
<option value="3">Third Option</option>
</select>

<select id="menu2"></select>

选择第一个下拉菜单后，menu2的预期结果为

<select id="menu2">
    <option value="c1">Cat</option>
    <option value="d1">Dog</option>
</select

---

因此，如果我选择第一个选项，它将获取值并与第一个数组中的过滤器匹配，然后填充第二个下拉列表。有什么想法吗？

这可以是一种方法：

$function{ var secondDropdown=[{ 过滤器：1， 价值观：[{ 值：b1， 文字：船 }, { 值：b2， 正文：Boat2 }, { 值：b3， 正文：Boat3 }] }, { 过滤器：2， 价值观：[{ 值：c1， 文本：Cat }, { 值：c2， 文本：Cat2 }, { 价值:c3,， 文本：Cat3 }] }]; $'menu1'.changefunction{ var currentValue=$this.val； $'menu2'.html； var content=secondDropdown.filterfunctionelem{ 返回elem.filter==当前值； }; $.eachcontent[0]！=未定义？内容[0]。值：[]，函数I，元素{ $'menu2'.append+elem.text+； }; }.触发变化； }; 第一选择 第二种选择 第三种选择

---

在数组中，使用更多具有选项值的数组

var secondDropdown=[ [猫、狗、独角兽]， [香蕉、苹果、草莓、梨、蓝莓]， [汽车，船] ]; $menu1.onchange，函数{ var drop2arr=secondDropdown[this.value-1]； $menu2.htmlfunction{ return+drop2arr.join+； }; }.改变； 动物 水果 东西 这段代码运行良好

var secondDropdown = ['cat|1','Dog|1','Banana|2','Apple|2','Car|3','Boat|3']; // here's where i'm lost. How do I create an array that has 2 values. first is the regular value and second value is the filter.
$("#menu1").on("change", function(){
    $("#menu2").html('');
    //Get current value of Menu1 on change event
    var value=$(this).val();
    for(var i = 0; i < secondDropdown.length; i++)
    {
        //Get associed values
        var splitted = secondDropdown[i].split('|');
        if(splitted[1] === value)
        {
            //append in the second select
            $("#menu2").append('<option value="'+splitted[1]+'">'+splitted[0]+'</option>');
        }
    }
});

---

你能显示菜单2的预期HTML结果吗。。。将其稍微更改为添加显示文本1条注释，1个问题。。。注释：这只是因为第一个下拉列表中的值是数字，而第二个下拉列表中的值是文字。将有4个选择，每个选择由前一个填充，因此这将不起作用。问：在menu2上，当您返回时，如果我读对了代码，是否应该有一个空的？还有，这个值是怎么设置的？给我一点时间，我来看看这个。。。谢谢！我在你编辑帖子之前发布了这个解决方案，所以我使用了你的初始数组。那是JSON对象吗？返回elem.filter时，.filter部分是否引用对象中的过滤器？最后，像这样做，我想我可以有一个带有menu2，menu3，menu4选项的大对象。我该怎么做那样的事呢？如果elem.filter返回值，我想我会说elem.menu=='menu1'，然后不知何故elem.filter在那一点？1这是一个对象，如果你将它字符串化，那么它将是一个JSON。2.filter是一个jquery函数，不引用对象键3 ofc yes u可以创建一个更复杂的对象，其中包含您需要的每个select的筛选器，然后使用select ID创建内容筛选elem.filter如何知道获取第一组值（如果为1）？如果筛选器是一个字而不是一个数字，该怎么办？filter函数获取数组中与menu1值匹配的每个元素以及obj的filter属性。我给你举个例子，但我需要找些时间