Optgroup issue in jquery - php

Question

Actually I have main categories under main categories I have list of products. For first main category I have subcategory and subcategory related products. whichever main category is not having subcategories I am splitting array with comma separator and appending that products to select dropdown. But if main category is having subcategory means I need to do optgroup with options. In optgroup subcatname and related products.
For example, subcatname1=> p1,p2,p3, subcatname2=> p1,p2,p3.
How we can resolve this please help somebody.
Below is 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>
Below is 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

You should iterate only once for your data and split the productnames from it.
Try the below code,
$(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);
}
});
})
});