根据首选

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

您可以将选项上的对象粘贴为数据字段以供参考。

＆＃13;

＆＃13;

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

＆＃13;

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

</select>

<select class="second">

</select>

＆＃13;

＆＃13;

＆＃13;

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>');
             });
    });
});