根據第一個選擇從特定JSON對象獲取值

Question

我有一組下拉框，我將使用JSON填充。我想要做的是用每個對象的名稱填充第一個下拉列表。然後，當某人從第一個下拉列表中選擇一個選項時，第二個下拉列表將填入與其第一個選擇相關的其他數據。我現在所擁有的是用產品名稱填充第一個選擇框並將值分配給ID對於第二個下拉列表，我希望選項基於與在第一個下拉列表中選擇的產品相關聯的選項，基於ID。

這裏是我到目前爲止，我不知道如何根據產品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的產品。然後，重複它的大小並填充第二個，就像第一個一樣。

每次清除選項。

然後，在開始時觸發'更改'以獲得第二個填充開始。

$(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

您可以將選項上的對象作爲數據字段作爲參考。

$(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>