根据优先选择从特定的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>');
             });
    });
});