JQuery的动态下拉选项 [英] Dynamic dropdown options with JQuery
问题描述
我想根据用户选择的公司动态更改HTML下拉菜单的选项-例如,我有以下JSON数据:
I would like to dynamically change the options of a HTML dropdown menu based on which company a user selects - for example, I have this JSON data:
series: [
{name: 'Company A', product: 'A1'},
{name: 'Company A', product: 'A2'},
{name: 'Company A', product: 'A3',},
{name: 'Company B', product: 'B1'},
{name: 'Company B', product: 'B2'}
]
我有两个下拉菜单:
<div class="col-md-4" >
<select class="company">
<option value=''><strong>Name</strong></option>
<option value="Company A">Company A</option>
<option value="Company B">Company B</option>
</select>
</div>
如果用户选择公司A,则我的第二个下拉列表将显示该公司的产品:
If the user selects Company A, then my 2nd dropdown will show products for that company:
<div class="col-md-4" >
<select class="product">
<option value=''><strong>Products</strong></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
</select>
</div>
同样,如果用户选择Company B,则选项将为B1,B2.
Likewise, if the user selects Company B, the options will be B1, B2.
我坚持使用与此功能类似的功能(我是Web开发人员的新手,并且基本上不了解javascript及其语法):
I am stuck with a function similar to this one (I am new to web dev and an largely unfamiliar with javascript and its syntax):
$('.company').change(function() {
company = this.value;
if (company) {
Highcharts.each(chart.series, function(ob, j) {
if (...................) {
ob.setVisible(true, true)
} else {
ob.setVisible(false, false)
}
});
}
})
此功能与Highcharts API有关,但我认为这与问题无关.我正在寻找一个更通用的JQuery/JavaScript答案,它不一定需要Highcharts ...
This function relates to the Highcharts API, but I don't think that that is relevant to the question; I am looking for a more general JQuery/JavaScript answer, it doesn't have to entail Highcharts...
推荐答案
与尝试一样,您应该在第一个select元素上使用.change()jQuery方法.然后只需遍历您的对象并创建新选项.
As in your try, you should use the .change() jQuery method on the first select element. Then just loop through your object and create the new options.
HTML:
<div class="col-md-4" >
<select class="company">
<option value=''><strong>Name</strong></option>
<option value="Company A">Company A</option>
<option value="Company B">Company B</option>
</select>
</div>
<div class="col-md-4" >
<select class="product">
<option value=''><strong>Products</strong></option>
</select>
</div>
JavaScript
var series = [
{name: 'Company A', product: 'A1'},
{name: 'Company A', product: 'A2'},
{name: 'Company A', product: 'A3'},
{name: 'Company B', product: 'B1'},
{name: 'Company B', product: 'B2'}
]
$(".company").change(function(){
var company = $(this).val();
var options = '<option value=""><strong>Products</strong></option>'; //create your "title" option
$(series).each(function(index, value){ //loop through your elements
if(value.name == company){ //check the company
options += '<option value="'+value.product+'">'+value.product+'</option>'; //add the option element as a string
}
});
$('.product').html(options); //replace the selection's html with the new options
});
这是一个正常工作的jsFiddle https://jsfiddle.net/6xtzt8k4/
Here is a working jsFiddle https://jsfiddle.net/6xtzt8k4/
这篇关于JQuery的动态下拉选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!