CODEWITHSUNDEEP
jqueryajaxhtml
ajay_t
ajay_t

Reputation: 2385

dynamic drop down using select tag and ajax on onselect event

I am developing an web application. I have one drop down list of category. On select event, the category is sent to server and data is fetched in the JSON format of subcategory belonging to that category. Depending on that, I have created dynamic drop down select list. But the problem is, When I select the category in drop down1, then all the subcategories belonging to that category goes in the single row of drop down(single option tag)

my ajax code for 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 am getting output like enter image description here

It should be like 

Select Subcategory

TO Increase RAM

To change Moniter

To change mouse

like one below another.

my HTML code is

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

What I am missing in ajax? Thanks

Upvotes: 0

Views: 1140

Answers (1)

Anupam
Anupam

Reputation: 8016

According to the info you gave in comment this should be the right way

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

Or

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

Right now you are appending to the option(child of select) but you should be appending to the select element, its parent.

Upvotes: 1

Related Questions