Question

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

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>

选择第一个dropDown后，menu2的预期结果将是

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

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

Answer 1

这可能是一种方法：

＆＃13;

$(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");


});

＆＃13;

<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>

＆＃13;

Answer 2

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

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>

Answer 3

此代码工作正常。

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

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

3 个答案: