我想根据用户选择的公司动态更改 HTML 下拉菜单的选项 - 例如,我有这个 JSON 数据:
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,那么我的第二个下拉列表将显示该公司的产品:
<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>
同样,如果用户选择公司 B,则选项将为 B1、B2。
我坚持使用与此类似的功能(我是网络开发新手,对 javascript 及其语法基本不熟悉):
$('.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...
最佳答案
在您的尝试中,您应该在第一个选择元素上使用 .change() jQuery 方法。然后循环遍历您的对象并创建新选项。
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/
关于javascript - JQuery 的动态下拉选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40640069/