jquery - How to set the value of select option -

i trying populate dropdown menu based on selection of first menu. using code below make next dropdown empty

  $(\".category_id\").change(function(){      $(\"#account_id > option\").remove();     $(\"#item_name_id > option\").remove();      var  category_id={'category_id':$(this).val()};   $.ajax({        type: \"post\",        url: 'getcategory1/',         datatype: \"json\",        data: category_id,        success: function(category_ids){    // category_ids = {"0":"choose account name","2":"officeequipment","3":"it equipment"}                $.each(category_ids,function(account_id,name){                    var opt = $('<option />');                              opt.val(account_id);                   opt.text(name);                    $(this).closest('td').next().find('select').append(opt);               });           }        }); }); 

the controller function used:

  public function actiongetcategory1(){         //get sub categories main category         $cat_id = $_post['category_id'];         $subcategory = item::model()->getcategory1($cat_id);          echo(json_encode($subcategory));     } 

the model function

public function getcategory1($cat_id){         $where  = "where category_id = $cat_id";         $select = "select * tbl_account $where";         $query  =  yii::app()->db->createcommand($select)->queryall();          $subcat = array();         $subcat[0] = "choose account name";            if($query){               foreach($query $row){                 $subcat[$row['account_id']] = $row['account_name'];               }               return $subcat;             }             else{ return false; }     } 

the data loop in $.each coming form controller in json format. used var_dump display i.

string(189) "{"0":"choose account name","2":"information , communication technology equipment","3":"office equipment","4":"furniture , fixtures","5":"communication equipment","6":"other equipments"}" 

should this. need use better selector getting < select > tag.

$.each(category_ids,function(account_id,name){     var x = document.createelement('option');     x.setattribute('value', account_id);     var y = document.createtextnode(name);     $(x).append(y);      $('#selectid').append(x) }); 

edit after further discussion looks better answer:

$(\".category_id\").change(function(){     var _this = this;     $(\"#account_id > option\").remove();     $(\"#item_name_id > option\").remove();      var  category_id={'category_id':$(this).val()};   $.ajax({        type: \"post\",        url: 'getcategory1/',         datatype: \"json\",        data: category_id,        success: function(category_ids){    // category_ids = {"0":"choose account name","2":"officeequipment","3":"it equipment"}                $.each(category_ids,function(account_id,name){                    var opt = $('<option />');                              opt.val(account_id);                   opt.text(name);                    $(_this).closest('td').next().find('select').append(opt);               });           }        }); }); 

this trips lot of people. here quick read on "this" scope should make clearer understand.http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/