[英]Dynamic dropdown options with JQuery
我想根據用戶選擇的公司動態更改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。
我遇到了類似於這個的功能(我是web dev的新手,對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 ......
在您的嘗試中,您應該在第一個select元素上使用.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/
所以如果我沒有弄錯你正在尋找這樣的東西。
HTML:
<select id="company"></select>
<select id="product"></select>
jQuery:
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'}
]
$(function(){
$("#product").html("<option id=''>Select</option>")
$("#company").html('<option id="">Select</option>')
$(series).each(function(index,value){
if($("#company").find('option[id="'+ value.name +'"]').length == 0){
$("#company").append('<option id="'+ value.name +'">'+value.name+'</option>')
}
})
})
$("#company").change(function(){
var companyId = $(this).val()
$("#product").html("<option id=''>Select</option>")
if(companyId != ''){
$(series).each(function(index,value){
if(value.name == companyId){
$("#product").append('<option id="'+value.product+'">'+ value.product+'</option>')
}
})
}
})
你在文件准備好的灌裝公司選擇的地方,只有在選擇中已經存在的情況下進行驗證,因為有重復的公司。
在更改時,我們正在清除產品選擇,並填寫產品,其中companyName ==首先選擇值。
這是jsFiddle https://jsfiddle.net/noitse/coz3q274/1/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.