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

jquery Autofill select with options from array

本文关键字：选择 选项 数组 填充 jquery      更新时间：2023-09-26

我将总共有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>

选择第一个下拉菜单后，菜单2的预期结果将是

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

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

这可以是一种方法：

$(function() {
  var secondDropdown = [{
    filter: "1",
    values: [{
      value: "b1",
      text: "Boat"
    }, {
      value: "b2",
      text: "Boat2"
    }, {
      value: "b3",
      text: "Boat3"
    }]
  }, {
    filter: "2",
    values: [{
      value: "c1",
      text: "Cat"
    }, {
      value: "c2",
      text: "Cat2"
    }, {
      value: "c3",
      text: "Cat3"
    }]
  }];
  $('#menu1').change(function() {
    var currentValue = $(this).val();
    $('#menu2').html("");
    var content = secondDropdown.filter(function(elem) {
      return elem.filter == currentValue;
    });
    $.each(content[0] != undefined ? content[0].values : [], function(i, elem) {
      $('#menu2').append("<option value='" + elem.value + "'>" + elem.text + "</option>");
    });
  }).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

此代码运行良好。

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

在您的数组中，使用更多带有选项值的数组。

var secondDropdown = [
  ["Cat", "Dog", "Unicorn"],
  ["Banana", "Apple", "Strawberry", "Pear", "Rapsberry"],
  ["Car", "Boat"]
];
$("#menu1").on("change", function(){
  var drop2arr = secondDropdown[this.value-1];          
  $("#menu2").html(function(){
     return "<option>"+ (drop2arr.join("</option><option>")) +"</option>";
  });
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="menu1">
<option value="1">Animals</option>
<option value="2">Fruits</option>
<option value="3">Things</option>
</select>
<select id="menu2"></select>

相关文章：