根据选择填充下拉列表

迪伦

我有一个年份的选择,一个品牌的选择,我只想填充与他们拥有的年份相关的品牌。我目前可以从 fitmentData.json 填充所有数据,但是当我尝试过滤我的选择时,我无法找到让它工作的方法。目前我有一个我认为可以工作的 updateMake() 函数,但是在黑客攻击大约 2 个小时后,我无法得到解决方案。

html

  <select name="year" id="year">

  </select>

  <select id="make" name="make">

  </select>
  <select id="model" name="model">

  </select>

js

 //year
    let yearDropdown = $('#year');
    yearDropdown.append('<option selected="true" disabled>Choose     
Year</option>');

    //make(brand in json)
    let brandDropdown = $('#make');
    brandDropdown.append('<option selected="true" disabled>Choose  
Make</option>');

    const url = 'fitmentData.json';

    //append json years in dropdown
    $.getJSON(url, function (data) {
      $.each(data, function (key, entry) {
        yearDropdown.append($('<option></option>').attr('value',  
entry.year).text(entry.year));
      })
      //remove year duplicates
      var map = {}
      $('select option').each(function () {
        if (map[this.value]) {
          $(this).remove()
        }
        map[this.value] = true;
      })
      //append json makes in dropdown
      $.each(data, function (key, entry) {
        brandDropdown.append($('<option></option>').attr('value',  
entry.brand).text(entry.brand));
        updateMake();
      });
      //remove make duplicates
      var map = {}
      $('select option').each(function () {
        if (map[this.value]) {
          $(this).remove()
        }
        map[this.value] = true;
      })

    //updates makes depending on selection
    function updateMake() {
      brandDropdown.empty();
      brandDropdown.append('<option selected="true" disabled>Choose  
Make</option>');
      if (yearDropdown.value == '1976') {
        var optionArray = ["Yamaha", "Kawasaki"];
        //populate makes depending on year
        for (i = 0; i <= optionArray.length; i++) {
          var newOption = document.createElement('option');
          newOption.innerHTML = optionArray[i];
          brandDropdown.append(newOption);
        }
      }
    }

配件数据.json

 [
 {
    "brand": "Yamaha",
    "model": "XT500",
    "year": "1976"
  },
  {
    "brand": "Honda",
    "model": "TL250",
    "year": "1976"
  },
  {
    "brand": "Yamaha",
    "model": "TT500",
    "year": "1976"
  },
  {
    "brand": "Honda",
    "model": "XL125",
    "year": "1976"
  },
  {
    "brand": "Kawasaki",
    "model": "KE125",
    "year": "1976"
  },
  {
    "brand": "Yamaha",
    "model": "YZ175",
    "year": "1976"
  },
  {
    "brand": "Honda",
    "model": "TL125",
    "year": "1976"
  },
  {
    "brand": "Suzuki",
    "model": "RM125",
    "year": "1976"
  }
]

再一次,我能够在下拉列表中填充所有 json 数据,但是 updateMake() 函数没有按预期工作。updateMake() 导致 make 根本不填充任何数据。

史瑞斯

您可以onchangeyear元素添加事件,以便在发生更改时updateMake()调用。yearDropdown.value不会像yearDropdownjQuery 对象那样工作,请考虑使用yearDropdown.val()

var data = [{
    "brand": "Yamaha",
    "model": "XT500",
    "year": "1976"
  },
  {
    "brand": "Honda",
    "model": "TL250",
    "year": "1976"
  },
  {
    "brand": "Yamaha",
    "model": "TT500",
    "year": "1976"
  },
  {
    "brand": "Honda",
    "model": "XL125",
    "year": "1976"
  },
  {
    "brand": "Kawasaki",
    "model": "KE125",
    "year": "1976"
  },
  {
    "brand": "Yamaha",
    "model": "YZ175",
    "year": "1976"
  },
  {
    "brand": "Honda",
    "model": "TL125",
    "year": "1976"
  },
  {
    "brand": "Suzuki",
    "model": "RM125",
    "year": "1976"
  }
];



//year
let yearDropdown = $('#year').append('<option selected="true" disabled>Choose Year</option>').on('change', function() {
  updateMake();
});

//make(brand in json)
let brandDropdown = $('#make').append('<option selected="true" disabled>Choose Make</option>');

//append json years in dropdown
$.each(data, function(key, entry) {
  yearDropdown.append($('<option></option>').attr('value', entry.year).text(entry.year));
})
//remove year duplicates
var map = {}
$('select option').each(function() {
  if (map[this.value]) {
    $(this).remove()
  }
  map[this.value] = true;
})
//append json makes in dropdown
$.each(data, function(key, entry) {
  brandDropdown.append($('<option></option>').attr('value', entry.brand).text(entry.brand));
  updateMake();
});
//remove make duplicates
var map = {}
$('select option').each(function() {
  if (map[this.value]) {
    $(this).remove()
  }
  map[this.value] = true;
})

//updates makes depending on selection
function updateMake() {
  brandDropdown.empty();
  brandDropdown.append('<option selected="true" disabled>Choose Make</option>');
  if (yearDropdown.val() == '1976') {
    var optionArray = ["Yamaha", "Kawasaki"];
    //populate makes depending on year
    for (i = 0; i < optionArray.length; i++) {
      var newOption = document.createElement('option');
      newOption.innerHTML = optionArray[i];
      brandDropdown.append(newOption);
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="year" id="year">

</select>

<select id="make" name="make">

</select>
<select id="model" name="model">

</select>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

根据其他下拉列表的选择填充一个下拉列表

来自分类Dev

AnglularJS:根据对第一个选择下拉列表的选择来填充第二个选择下拉列表

来自分类Dev

根据从其他下拉列表中选择的值填充一个下拉列表

来自分类Dev

根据更改事件填充选择下拉列表

来自分类Dev

使用JSTL根据另一个下拉选择将值填充到下拉列表中

来自分类Dev

选择嵌套的JSON对象并填充下拉列表

来自分类Dev

根据自动填充值填充下拉列表

来自分类Dev

根据先前对下拉列表的选择,删除“选择下拉列表”选项

来自分类Dev

根据EF子关系填充下拉列表

来自分类Dev

在angularjs中填充下拉列表选择

来自分类Dev

根据下拉选择填充列

来自分类Dev

根据从下拉列表中选择的值来填充数据库中的表单值

来自分类Dev

ReactJS使用Ajax根据第一个下拉列表选择的值填充下拉列表

来自分类Dev

根据下拉列表选择,使用其他表中的数据填充空表

来自分类Dev

根据选择的下拉条目,从其他列表中填充特定文本

来自分类Dev

使用JSTL根据另一个下拉选择将值填充到下拉列表中

来自分类Dev

根据选择填充额外的下拉菜单

来自分类Dev

根据在其他下拉框中选择的选项填充下拉列表

来自分类Dev

根据其他下拉列表的选择填充一个下拉列表

来自分类Dev

根据下拉选择填充复选框列表

来自分类Dev

根据对另一个不接受数值的下拉列表的选择来填充下拉列表

来自分类Dev

如何根据下拉列表选择填充多个文本框?

来自分类Dev

根据第一个多选下拉列表的选择填充下拉列表

来自分类Dev

根据下拉选择填充文本字段

来自分类Dev

根据下拉选择填充复选框

来自分类Dev

AngularJS:根据第一个选择下拉列表的选择填充第二个选择下拉列表

来自分类Dev

Angularjs:根据用户输入填充下拉列表

来自分类Dev

根据 ASP.NET MVC 5 中另一个下拉列表中的选择填充下拉列表

来自分类Dev

根据已更改的下拉列表填充 textarea

Related 相关文章

  1. 1

    根据其他下拉列表的选择填充一个下拉列表

  2. 2

    AnglularJS:根据对第一个选择下拉列表的选择来填充第二个选择下拉列表

  3. 3

    根据从其他下拉列表中选择的值填充一个下拉列表

  4. 4

    根据更改事件填充选择下拉列表

  5. 5

    使用JSTL根据另一个下拉选择将值填充到下拉列表中

  6. 6

    选择嵌套的JSON对象并填充下拉列表

  7. 7

    根据自动填充值填充下拉列表

  8. 8

    根据先前对下拉列表的选择,删除“选择下拉列表”选项

  9. 9

    根据EF子关系填充下拉列表

  10. 10

    在angularjs中填充下拉列表选择

  11. 11

    根据下拉选择填充列

  12. 12

    根据从下拉列表中选择的值来填充数据库中的表单值

  13. 13

    ReactJS使用Ajax根据第一个下拉列表选择的值填充下拉列表

  14. 14

    根据下拉列表选择,使用其他表中的数据填充空表

  15. 15

    根据选择的下拉条目,从其他列表中填充特定文本

  16. 16

    使用JSTL根据另一个下拉选择将值填充到下拉列表中

  17. 17

    根据选择填充额外的下拉菜单

  18. 18

    根据在其他下拉框中选择的选项填充下拉列表

  19. 19

    根据其他下拉列表的选择填充一个下拉列表

  20. 20

    根据下拉选择填充复选框列表

  21. 21

    根据对另一个不接受数值的下拉列表的选择来填充下拉列表

  22. 22

    如何根据下拉列表选择填充多个文本框?

  23. 23

    根据第一个多选下拉列表的选择填充下拉列表

  24. 24

    根据下拉选择填充文本字段

  25. 25

    根据下拉选择填充复选框

  26. 26

    AngularJS:根据第一个选择下拉列表的选择填充第二个选择下拉列表

  27. 27

    Angularjs:根据用户输入填充下拉列表

  28. 28

    根据 ASP.NET MVC 5 中另一个下拉列表中的选择填充下拉列表

  29. 29

    根据已更改的下拉列表填充 textarea

热门标签

归档