[英]Populate dropdown based on selection
我有一個“年份”選擇,一個“品牌”選擇,我只想填充與他們擁有的年份相關的品牌。 我目前可以從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);
}
}
}
fitmentData.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完全不填充任何數據。
您可以在year
元素上添加onchange
事件,以便在發生更改時調用updateMake()
。 另外yearDropdown.value
不會起作用,因為yearDropdown
是一個jQuery對象,請考慮改用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.