最初の選択に基づいて特定のJSONオブジェクトから値を取得する

Question

私はJSONで設定するドロップダウンのセットを持っています。私がしたいのは、最初のドロップダウンに各オブジェクトの名前を入力することです。次に、最初のドロップダウンからオプションを選択すると、2番目のドロップダウンには最初の選択に関連する他のデータが入力されます。私が今持っているのは、最初の選択ボックスに製品名を入力して値をIDに割り当てることです。2番目のドロップダウンでは、最初のドロップダウンで選択した製品に関連付けられたオプションに基づいてオプションを設定します。 IDに基づいて

$(function() { 
 
    var products = [{ 
 
     "id": 0, 
 
     "name": "First Product", 
 
     "sizes": [{ 
 
      "size": "small" 
 
     },{ 
 
      "size": "medium" 
 
     }] 
 
     }, 
 
     { 
 
     "id": 1, 
 
     "name": "Second Product", 
 
     "sizes": [{ 
 
      "size": "small" 
 
     },{ 
 
      "size": "medium" 
 
     }] 
 
    } 
 
    ] 
 

 
    $.each(products, function(key, val) { 
 
     $('.first').append('<option value="' + val.id + '">' + val.name + '</option>'); 
 
    }); 
 
    
 
    $('.first').change(function() { 
 
     var selectedProduct = $(this).val(); 
 
     $.each(products['id'][selectedProduct], function(key, val) { 
 
     $('second').append('<option id="' + val.sizes.size + '">' + val.sizes.size + '</option>'); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="first"> 
 

 
</select> 
 

 
<select class="second"> 
 

 
</select>

Answer 1

$(function() { 
    var products = [{ 
     "id": 0, 
     "name": "First Product", 
     "sizes": [{ 
      "size": "small" 
     },{ 
      "size": "medium" 
     }] 
    }, { 
     "id": 1, 
     "name": "Second Product", 
     "sizes": [{ 
      "size": "small" 
     },{ 
      "size": "medium" 
     }] 
    }] 

    $.each(products, function(key, val) { 
     $('.first').append('<option value="' + val.id + '">' + val.name + '</option>'); 
    }); 

    $('.first').change(function() { 
     var selectedProduct = $(this).val(); 

     var getProduct = products.filter(function(obj) { 
      return obj.id == selectedProduct; 
     }); 
     $('.second').find('option').remove(); 
     $.each(getProduct[0].sizes, function(key, val) { 
       $('.second').append('<option id="' + val.size + '">' + val.size + '</option>'); 
      }); 
    }); 
}); 

Answer 2

あなただけ反復処理する必要があります。ここでは

は、私がこれまでのところ、私は唯一の製品IDに基づいて選択された製品からデータを取得する方法を確認していない持っているものです製品を再度選択して、現在選択されているIDを持つ商品を探します。次に、最初のものと同じように、サイズを繰り返して、2番目のものを埋めてください。

オプションを毎回クリアします。

開始時に「変更」をトリガーして、2番目の値を入力して開始します。

$(function() { 
    var products = [{ 
     "id": 0, 
     "name": "First Product", 
     "sizes": [{ 
      "size": "small" 
     },{ 
      "size": "medium" 
     }] 
     }, 
     { 
     "id": 1, 
     "name": "Second Product", 
     "sizes": [{ 
      "size": "med" 
     },{ 
      "size": "large" 
     }] 
    } 
    ] 

    $.each(products, function(key, val) { 
     $('.first').append('<option value="' + val.id + '">' + val.name + '</option>'); 
    }); 

    $('.first').change(function() { 
     var selectedProduct = $(this).val(); 
     $.each(products, function(key, val) { 
      if (val.id==selectedProduct) { 
       $('.second').find('option').remove(); 
       $.each(val.sizes, function(key2, val2) { 
        $('.second').append('<option value="' + val2.size + '">' + val2.size + '</option>'); 
       }); 
      } 
     }); 
    }); 

    $('.first').trigger('change'); 
}); 

Answer 3

オブジェクトをオプションのデータフィールドとして参照することができます。あなたは2番目のドロップダウンに表示しようとしている何

$(function() { 
 
    var products = [{ 
 
     "id": 0, 
 
     "name": "First Product", 
 
     "sizes": [{ 
 
      "size": "small" 
 
     },{ 
 
      "size": "medium" 
 
     }] 
 
     }, 
 
     { 
 
     "id": 1, 
 
     "name": "Second Product", 
 
     "sizes": [{ 
 
      "size": "small" 
 
     },{ 
 
      "size": "medium" 
 
     }] 
 
    } 
 
    ] 
 

 
    $.each(products, function(key, val) { 
 
     var $option = $('<option>').val(val.id).text(val.name).data('object-reference', val); 
 
     $('.first').append($option); 
 
    }); 
 
    
 
    $('.first').change(function() { 
 
     var selectedProduct = $(this).find('option:selected'); 
 
     
 
     $.each(selectedProduct.data('object-reference').sizes, function(key, val) { 
 
     $('.second').append('<option id="' + val.size + '">' + val.size + '</option>'); 
 
     }); 
 
    }); 
 
    
 
    
 
    setTimeout(function(){ 
 
     products[1].sizes = [ { 'size': 'changed1' }, { 'size': 'changed2' } ]; 
 
    }, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="first"> 
 

 
</select> 
 

 
<select class="second"> 
 

 
</select>