jquery中的Optgroup问题

Question

实际上，我在主要类别下有主要类别，我有产品列表。对于第一个主要类别，我有子类别和子类别相关产品。无论哪个主要类别没有子类别，我都使用逗号分隔符拆分数组并将该产品附加到选择下拉列表中。但是，如果主类别有子类别，则意味着我需要使用选项进行 optgroup。在 optgroup subcatname 和相关产品中。 例如，subcatname1=> p1,p2,p3, subcatname2=> p1,p2,p3。 我们如何解决这个问题，请帮助某人。

下面是 HTML，

<select name="category" id="category" /> 
   <option selected ="selected">Select category</option>

   <?php foreach($decode as $key => $value) { ?>

          <option value="<?php echo $value['category_id']; ?>"><?php echo $value['name']; ?></option>


          <?php } ?>

 </select>
<select name="category12" class="category12" /></select>

下面是Jquery，

$(document).ready(function(){
        $('#category').change(function(){
        var category_id=$('#category').val();
          $.ajax({
          type: "get",
          url: 'data_product.php?category_id='+category_id,
          success: function(data) {
          var products = data.split(",");
          state_html = '';
          state_html = '<option>Please Select product</option>'
          $.each(products, function (index, productName) {
                 state_html += "<option value='"+productName+"'>"+productName+"</option>";

                 //var gain=
                });
                $('.category12').html(state_html);
            },
        $.each(data, function (index, sub_cat_name) {
                 state_html += "<optgroup label='"+sub_cat_name+"'>"+sub_cat_name+"
                    <option value="+products_name+">"+products_name+"</option>
                 </optgroup>";

                 //var gain=
                });
                $('.category12').html(state_html);
            },

        });
    })
});

Answer 1

您应该只为您的 data 迭代一次并从中拆分 productnames。

试试下面的代码，

$(document).ready(function() {
  $('#category').change(function() {
    var category_id = this.value; // use simply this.value here
    $.ajax({
      type: "get",
      url: 'data_product.php?category_id=' + category_id,
      dataType:'json',
      success: function(data) {
        state_html = '<option>Please Select product</option>'
        $.each(data, function(sub_cat_name, product) {
          // split all products here
          var products = product.split(",");
          make optgroup from sub_cat_name key
          state_html += "<optgroup label='" + sub_cat_name + "'>" + sub_cat_name;
          // loop for all product options
          for (var i = , l = products.length; i < l; i++) {
            state_html += "<option value='" + products[i] + "'>" + products[i] + "</option>";
          }
          state_html += "</optgroup>"; // close optgroup here
        });
        // finally append all options
        $('.category12').html(state_html);
      }
    });
  })
});