jquery中的optgroup问题

Question

其实我在主要类别下有主要类别我有产品列表。对于第一主要类别我有子类别和子类别相关的产品。无论哪个主类别都没有子类别我用逗号分隔符将数组分割并将该产品附加到选择下拉列表中。但是，如果主类别是子类别意味着我需要做optgroup选项。在optgroup子目录名称和相关产品中。 例如，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); 
     } 
    }); 
    }) 
});