jqueryのOptgroupの問題

Question

実際に私は主要なカテゴリの下に主要なカテゴリを持っています。私は製品のリストを持っています。最初のメインカテゴリには、サブカテゴリとサブカテゴリ関連の製品があります。どのメインカテゴリにサブカテゴリがないかは、コンマ区切りで配列を分割し、その製品をドロップダウンを選択するために追加しています。しかし、メインカテゴリがサブカテゴリを持っている場合は、オプション付きで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> 

は、あなたがあなたのdataのために一度だけ反復処理し、それからproductnamesを分割しなければならないの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

です。

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