根据第一个选择从特定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>