Question

I write ajax on my page, to get subcategories in select option, depending on categories option list click. In all browsers it works good, i can see my request, response in browsers console… but in chrome functions even doesn`t call. Dou you know, in what the problem is? Here is my code:

    <td>
      <span style="color: #898989;">Main categories</span>
      <br />
      <select style="width: 200px;">
        <?foreach ($main_categories as $item){?>
        <option onclick="get_sub_cat(<?=$item['id']?>,2);return false;" value="<?=$item['id']?>"><?=$item['title']?></option>
        <?}?>
      </select> 
    </td>
    <td>
      <span style="color: #898989;">Subcategories</span>
      <br />
      <select  name="sub_cat" style="width: 200px;" id="prod_subcat_2">
      </select> 
    </td>


function get_sub_cat(id, select_id){
$.ajax({
   type: "POST",
   url: "<?=base_url()?>admin/product/get_sub_cat/"+id,
   data: "",
   success:function (option_list) {
     $("#prod_subcat_"+select_id).children().remove();
     $('#prod_subcat_'+select_id).append(option_list);
   }
 });
}

Answer 1

An <option> elements onclick is not universally supported, instead use an event of the parent <select>

$('#theselect').change(function() {
   alert( $(this).val() );
});​