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