根據不同的選擇框獲取數組值

Question

我有兩個選擇框：

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

我也想將名稱和產品存儲在一個變量中，但這只是為了表明它從數組中選擇了正確的值，它不會在其他任何地方使用。

Answer 1

我將在html中使用輔助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> 

Answer 2

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

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

使用jQuery獲取名稱和產品的值