獲取基於陣列值的不同選擇框

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

我將使用輔助data屬性在HTML！使用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來獲取值名稱和產品