根据不同的选择框获取数组值答案

【问题标题】：Get array value based on different select boxes根据不同的选择框获取数组值
【发布时间】：2018-03-07 03:19:20
【问题描述】：

我有两个选择框：

<select class="company">
      <option value=''><strong>Name</strong></option>
      <option value="Company A">Company A</option>
      <option value="Company B">Company B</option>
</select>
<select class="product">
      <option value=''><strong>Products</strong></option>
</select>

我需要根据两个选择框选择从数组中获取位置值。它将在另一个函数中使用。这是我的脚本：

var series = [
{name: 'Company A', product: 'A1',location:'USA'},
{name: 'Company A', product: 'A2',location:'Mexico'},
{name: 'Company A', product: 'A3',location:'China'},
{name: 'Company B', product: 'B1',location:'USA'},
{name: 'Company B', product: 'B2',location:'Mexico'}
]

$(".company").change(function(){
var company = $(this).val();
var options =  '<option value=""><strong>Products</strong></option>';
$(series).each(function(index, value){
    if(value.name == company){
        options += '<option value="'+value.product+'">'+value.product+'</option>';
    }
});

$('.product').html(options);
});

我还想将名称和产品存储在一个变量中，但这只是为了表明它从数组中选择了正确的值，它不会在其他任何地方使用。

【问题讨论】：

标签： javascript jquery arrays select

【解决方案1】：

我将在 html 中使用 helper data 属性！使用data也很容易获得！在这里我尝试了data-location 属性...

var series = [
{name: 'Company A', product: 'A1',location:'USA'},
{name: 'Company A', product: 'A2',location:'Mexico'},
{name: 'Company A', product: 'A3',location:'China'},
{name: 'Company B', product: 'B1',location:'USA'},
{name: 'Company B', product: 'B2',location:'Mexico'}
]

$(".company").change(function(){
var company = $(this).val();
var options =  '<option value=""><strong>Products</strong></option>';
$(series).each(function(index, value){
    if(value.name == company){
        options += '<option value="'+value.product+'" data-location="'+value.location+'">'+value.product+'</option>';
    }
});

$('.product').html(options).off().on("change",function(){
     console.log($(this).find(":selected").data("location"));
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="company">
      <option value=''><strong>Name</strong></option>
      <option value="Company A">Company A</option>
      <option value="Company B">Company B</option>
</select>
<select class="product">
      <option value=''><strong>Products</strong></option>
</select>

【讨论】：

【解决方案2】：

let name = ...
let product = ...

let result = (series.find((item) => {
    return (item.name === name) && (item.product===product)
})).location;

使用 jquery 获取名称和产品的值

【讨论】：