javascript - 我正在寻找一些在 jQuery 中构建产品选择器的想法

Question

我正在构建一个产品选择器，这一次我想构建一个最佳实践，所以我很好奇其他开发人员认为最好的方法是什么。我有一个产品类别选择器，用于填充产品选择器。

1. 我不希望在选择类别之前显示产品选择器
2. 如果类别只有 1 个，我不希望产品选择器显示产品
3. 如果满足以下条件之一，我不想将要分配给 var 的产品 ID 分配给变量:满足上述条件。

我考虑过使用CSS来隐藏第二个元素，或者在JS中动态生成。我也创建了一个 fiddle 。任何意见将不胜感激。

https://jsfiddle.net/simplymarkb/oa4xf2zg/

<label for="category" class="label">Category:</label>
    <select id="category" class="inputSelector" name="category" data-field-name="category">
    <option value="0">Select Category...</option>
</select><br><br>
<label for="productname" class="label">Product:</label>
    <select id="productname" class="inputSelector" name="productname" data-field-name="productname">
    <option value="0">Select Product...</option>
</select>



<script>
let json = [{
      "Identifier": "LOC005",
      "Category": "Soft Drink",
      "Product": "Mountain Dew",
      "ProductID": "mdew-23984987"
    },
    {
      "Identifier": "LOC005",
      "Category": "Side Dish",
      "Product": "Brown Rice",
      "ProductID": "rice-3434333"
    },
    {
      "Identifier": "LOC005",
      "Category": "Side Dish",
      "Product": "Noodles",
      "ProductID": "noodle-46ss333"
    }, 
    {
      "Identifier": "LOC005",
      "Category": "Soft Drink",
      "Product": "Sprite",
      "ProductID": "sprite-038033"
    },
    {
      "Identifier": "LOC005",
      "Category": "Pie",
      "Product": "Key Lime",
      "ProductID": "kl-39637623"
    },
    {
      "Identifier": "LOC005",
      "Category": "Pie",
      "Product": "Pumpkin",
      "ProductID": "pm-373768534"
    },
    {
      "Identifier": "LOC005",
      "Category": "Soft Drink",
      "Product": "Pepsi",
      "ProductID": "pepsi-39784862"
    },
    {
      "Identifier": "LOC005",
      "Category": "Soft Drink",
      "Product": "Dr. Pepper",
      "ProductID": "drpep-r34872"
    },
    {
      "Identifier": "LOC005",
      "Category": "Pie",
      "Product": "Blueberry",
      "ProductID": "bl-pie00012"
    },
    {
      "Identifier": "LOC005",
      "Category": "Pie",
      "Product": "Apple",
      "ProductID": "ap-pie9838732"
    },
    {
      "Identifier": "LOC005",
      "Category": "Soft Drink",
      "Product": "Coke",
      "ProductID": "coke-0e4801"
    },
    {
      "Identifier": "LOC005",
      "Category": "Pie",
      "Product": "Cherry",
      "ProductID": "ch-pie948001"
    }]

const prodCategory = [... new Set(json.map(data => data.Category))]
$.each(prodCategory, function(index, value) { 
  $("#category").append("<option class='rsource' value='"+value+"'>"+value+"</option>");
});


$("#category").change(function(){
  $("#productname").empty();
  var selValue = $(this).val();  
  let obj = json.filter(item => item.Category === selValue);
  let productval = obj.filter(item => item.Product);
  let prodcount = productval.length;

    // -- I only want to display the product selector if the category has more than one product
  if( prodcount !== 1 ){
  $.each(obj , function(index, item) {
    var Product = item.Product;
    var ProductID = item.ProductID;
    $("#productname").append("<option value='"+ProductID+"'>"+Product+"</option>");
  });
  } else {
    // something else
  }
});
</script>

Answer 1

答案如下:https://jsfiddle.net/83gzbxur/5/

1. 产品选择器在开始时隐藏。
2. 仅在满足条件时才会显示产品选择器。
3. 当显示产品选择器并且用户选择一个值时，可以检索并使用该值。

// ... (full code is in the fiddle)
// changes are made as follows

  $("#category").change(function(){
    // ...
    $("#selectedProduct").text('--')
    // ...
  })

  if( prodcount > 1 ){
    $("#products").show()
    // ...
  }else{
    $("#products").hide()
  }

  $("#productname").change(function(){
    $("#selectedProduct").text($("#productname").val())
  })

// ...