我有一个 jquery 脚本，可以填充第二个 <select>根据第一个 <select> 所做的选择。一切工作正常，但当然我在使用 Internet Explorer 时遇到了问题，而且我不知道如何解决它。
JS:
$(document).ready(function(){
var categories = [
{
value: '1',
name: 'Telefoane, Tablete si Laptopuri',
subCategories: [{
value: '10',
name: 'Telefoane Mobile'
}, {
value: '11',
name: 'Tablete'
}, {
value: '12',
name: 'Laptopuri'
}, {
value: '13',
name: 'Smartwatch'
}, {
value: '14',
name: 'Bratari Fitness'
}, {
value: '15',
name: 'Drone'
}, {
value: '16',
name: 'Altele'
}]
}, {
value: '2',
name: 'PC, Componente si Periferice',
subCategories: [{
value: '17',
name: 'Sisteme PC'
}, {
value: '18',
name: 'Monitoare'
}, {
value: '19',
name: 'Componente PC'
}, {
value: '20',
name: 'Periferice PC'
}, {
value: '21',
name: 'Imprimante si Consumabile'
}]
}, {
value: '3',
name: 'TV, Audio, Foto si Gaming',
subCategories: [{
value: '22',
name: 'Televizoare'
}, {
value: '23',
name: 'Home Cinema si Audio'
}, {
value: '24',
name: 'Aparate Foto si Accesorii'
}, {
value: '25',
name: 'Camere Video si Sport'
}, {
value: '26',
name: 'Console si Jocuri'
}]
}, {
value: '4',
name: 'Electrocasnice',
subCategories: [{
value: '27',
name: 'Aer conditionat'
}, {
value: '28',
name: 'Frigorifice'
}, {
value: '29',
name: 'Masini de spalat rufe'
}, {
value: '30',
name: 'Aragazuri'
}, {
value: '31',
name: 'Hote'
}, {
value: '32',
name: 'Masini de spalat vase'
}, {
value: '33',
name: 'Cuptoare cu microunde'
}, {
value: '34',
name: 'Aparate de bucatarie'
}, {
value: '35',
name: 'Aparate de calcat'
}, {
value: '36',
name: 'Aspiratoare'
}, {
value: '37',
name: 'Altele'
}]
}, {
value: '5',
name: 'Casa, Gradina si Bricolaj',
subCategories: [{
value: '38',
name: 'Mobila si Decoratiuni'
}, {
value: '39',
name: 'Gradina'
}, {
value: '40',
name: 'Materiale de constructii'
}, {
value: '41',
name: 'Termice'
}, {
value: '42',
name: 'Electrice si Sanitare'
}, {
value: '43',
name: 'Unelte'
}, {
value: '44',
name: 'Scule si Feronerie'
}, {
value: '45',
name: 'Articole menaj'
}]
}, {
value: '6',
name: 'Sport si Activitati',
subCategories: [{
value: '46',
name: 'Alergare'
}, {
value: '47',
name: 'Atletism si Triatlon'
}, {
value: '48',
name: 'Sporturi de iarna'
}, {
value: '49',
name: 'Ciclism'
}, {
value: '50',
name: 'Drumetii'
}, {
value: '51',
name: 'Camping si Articole voiaj'
}, {
value: '52',
name: 'Tenis si Tenis de masa'
}, {
value: '53',
name: 'Role'
}, {
value: '54',
name: 'Trotinete si Skateboard'
}, {
value: '55',
name: 'Pescuit si Vanatoare'
}, {
value: '56',
name: 'Altele'
}]
}, {
value: '7',
name: 'Auto si Moto',
subCategories: [{
value: '57',
name: 'Anvelope si Jante'
}, {
value: '58',
name: 'Intretinere si Cosmetica auto'
}, {
value: '59',
name: 'Electronice auto'
}, {
value: '60',
name: 'Accesorii auto'
}, {
value: '61',
name: 'Moto'
}, {
value: '62',
name: 'ATV'
}]
}, {
value: '8',
name: 'Jucarii, Copii si Bebe',
subCategories: [{
value: '63',
name: 'Scutece si Hrana'
}, {
value: '64',
name: 'Igiena si Ingrijire'
}, {
value: '65',
name: 'Carucioare'
}, {
value: '66',
name: 'Imbracaminte'
}, {
value: '67',
name: 'Jucarii'
}]
}, {
value: '9',
name: 'Animale de companie',
subCategories: [{
value: '68',
name: 'Caini'
}, {
value: '69',
name: 'Pisici'
}, {
value: '70',
name: 'Hrana'
}, {
value: '71',
name: 'Lese si Zgarzi'
}, {
value: '72',
name: 'Jucarii'
}, {
value: '73',
name: 'Imbracaminte'
}, {
value: '74',
name: 'Altele'
}]
}
];
var $categorySelect = $("#category");
var $subCategorySelect = $("#subcategory");
// populate categories with options
categories.forEach(function(category) {
var $option = $('<option/>').attr('value', category.value).html(category.name);
$categorySelect.append($option);
});
$categorySelect.on('change', function() {
// clean subcategory select from older options
$subCategorySelect.empty();
// find selected category
var selectedCategoryValue = $categorySelect.val();
var category = categories.find(function(category) {
return category.value == selectedCategoryValue;
});
// if category found - populate subcategory select
if (category) {
category.subCategories.forEach(function(subcategory) {
// you can extract this line into separate function
var $option = $('<option/>').attr('value', subcategory.value).html(subcategory.name);
$subCategorySelect.append($option);
});
}
})
});
HTML:
<div class="step">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Categorie</label>
<select class="form-control" name="category" id="category">
<option value=""></option>
</select>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Subcategorie</label>
<select class="form-control" name="subcategory" id="subcategory">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
有人可以帮助我解决这种情况吗？
PS:请询问您是否需要我提供任何其他信息。
JSFiddle:https://jsfiddle.net/eh437hL2/#
最佳答案
使用filter代替find，find用于dom遍历，filter用于 过滤值
var category = categories.filter(function(category) {
return category.value == selectedCategoryValue;
});
if (category[0]) {
category[0].subCategories.forEach(function(subcategory) {
// you can extract this line into separate function
var $option = $('<option/>').attr('value', subcategory.value).html(subcategory.name);
$subCategorySelect.append($option);
});
}
关于javascript - <select> 不在 IE 中工作的人群，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36148538/