Question

我想根据用户选择的公司动态更改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 ......

Answer 1

所以，如果我没有弄错的话，你正在寻找类似的东西。

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/

Answer 2

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

使用JQuery

2 个答案: