Javascript 使用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>

---

这个函数与Highcharts API相关，但我认为这与问题无关；我正在寻找一个更通用的JQuery/JavaScript答案，它不必包含高图…

因此，如果我没有弄错的话，您正在寻找这样的答案

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>')
               }
             })
         }
    })

var系列=[
{名称：'A公司'，产品：'A1'}，
{名称：'A公司'，产品：'A2'}，
{名称：'A公司'，产品：'A3'}，
{名称：'B公司'，产品：'B1'}，
{名称：'B公司'，产品：'B2'}
]
$（函数（）{
$（“#产品”）.html（“选择”）
$（“#公司”）.html（'Select'））
$（系列）。每个（函数（索引、值）{
if（$（“#company”）.find（'option[id=“”+value.name+”））.length==0）{
$（“#公司”）.append（“”+value.name+“”）
} 
}) 
})
$（“#公司”）.变更（职能（）{
var companyId=$（this.val（）
$（“#产品”）.html（“选择”）
如果（公司ID！=''）{
$（系列）。每个（函数（索引、值）{
if（value.name==companyId）{
$（“#产品”）.append（“”+value.product+“”）
}
})
}
})

如果您选择了“已准备好填写文档的公司”，则仅验证是否已在“选择”中存在，因为存在重复的公司

在更改时，我们将清除product select，并填充producs，其中companyName==第一个选择值

---

这里是jsFiddle

在您的尝试中，您应该在第一个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>

名称
A公司
B公司
产品

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
});

var系列=[
{名称：'A公司'，产品：'A1'}，
{名称：'A公司'，产品：'A2'}，
{名称：'A公司'，产品：'A3'}，
{名称：'B公司'，产品：'B1'}，
{名称：'B公司'，产品：'B2'}
]
$（“.company”）.change（函数（）{
var company=$（this.val（）；
var options='产品'；//创建“标题”选项
$（系列）.each（函数（索引，值）{//循环遍历元素
如果（value.name==company）{//请检查该公司
options+=''+value.product+''；//将option元素添加为字符串
}
});
$（'.product'）.html（选项）；//用新选项替换所选内容的html
});

这是一个正在工作的jsFiddle

<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>

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
});