私は2つの選択ボックスを持っている別の選択ボックス

Question

に基づいて配列値を取得します。別の機能で使用されます。ここに私のスクリプトは次のとおりです。私も変数に名前と製品を保管したいのですが、私はそれが配列から正しい値を選ん表示するようにするためにそれはちょうどだ

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属性を使用します取得するために使用jqueryの！ 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; 

名および製品