根據優先選擇從特定的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

您只需要再次遍歷產品，以查找具有當前所選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 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> 

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) {
        $('.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>');
             });
    });
});