jquery - dynamic drop down using select tag and ajax on onselect event -

i developing web application. have 1 drop down list of category. on select event, category sent server , data fetched in json format of subcategory belonging category. depending on that, have created dynamic drop down select list. problem is, when select category in drop down1, subcategories belonging category goes in single row of drop down(single option tag)

my ajax code drop down on success

 success: function(data)         {             console.log(data);             $.each(data,function(index, store)  {                 console.log(store);             $.each(store, function(key,value){                      if(key === "subcatname"){                        options.append($("<option  />").val(value).text(value));                         };                    });               });            }, 

i getting output

it should

select subcategory  increase ram  change moniter  change mouse 

like 1 below another.

my html code is

 <select id="dynamic_select_delete" style="height: 30px;">                 <option id="options">select subcategory </option>             </select> 

what missing in ajax? thanks

according info gave in comment should right way

options.parent().append($("<option  />").val(value).text(value)); 

or

$("<option  />").val(value).text(value).insertafter(options); 

right appending option(child of select) should appending select element, parent.