javascript - Ajax change(function() not triggered -

javascript - Ajax change(function() not triggered -

i trying create 3 drop downwards menu products , categories - sub categories - sub sub categories eg: category-health,beauty , personal==> subcategory-makeup ==> subsubcategory- eyeliner . main category populates , sub category should populate according user selection ,if select health,beauty personal care should populate sub categories. have written ajax alter function dynamically value user , reload page. , receiving value user sub category not populated. in next coding snippet, if cat_id changed function triggered . , cat_id not receiving value if user select alternative in main category. please help me or advice me need resolve this....

$(document).ready(function(){ $('#cat_id').change(function() { var categoryid = $(this).val(); // alert(categoryid); $.post("<?php echo default_url ?>/addproduct/ajax_getsubcategory", {categoryid: categoryid}, function(data) { if (data) { // $('#cat_id').html(data); $('#subcat_id').html(data); $('#subsubcat_id').html('<option>select sub sub category</option>'); } }); }); });

this source of issue:

change:

var categoryid = $(this).val();

to:

var categoryid = $(this).find(':selected').val();

at moment trying value of dropdown rather selected value.

javascript php ajax