Я ищу некоторые идеи создания селектора продукта в jQuery

Question

Я создаю селектор продуктов, и на этот раз я хотел бы создать наилучшую практику, поэтому мне любопытно посмотреть, что другие разработчики считают лучшим подходом. У меня есть селектор категории товаров, который заполняет селектор товаров.

1. Я не хочу, чтобы селектор товаров отображался до тех пор, пока не будет выбрана категория
2. Я не хочу, чтобы селектор товаров чтобы показать, есть ли в категории только 1 продукт
3. Я не хочу назначать идентификатор продукта, который будет присвоен переменной, если выполняется одно из указанных выше условий.

Я рассмотрел используя CSS, чтобы скрыть второй элемент, или генерируя динамически в JS. Я также создал скрипку. Будем благодарны за любой вклад.

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

// ...