How to put AJAX response in select tag?

Question

Here is my HTML

<select class="expand" id="search_category" style="display: none;">
 <option value=""></option>
 <option value="Sports">Sports</option>
 <option value="Arts & Music">Arts & Music</option>
 <option value="Academic & Tech">Academic & Tech</option>
 <option value="Odd Jobs">Odd Jobs</option>
 </select>

When I selects any option, on change jQuery AJAX is called. Here is JSON response

["Lacrosse","Squash","Basketball","Swimming","Golf","Tennis","Football","Other","Baseball"]

I also tried to get HTML response like this way

<option value=""></option>
<option value="Lacrosse">Lacrosse</option>
<option value="Squash">Squash</option>
<option value="Basketball">Basketball</option>
<option value="Swimming">Swimming</option>
<option value="Golf">Golf</option>
<option value="Tennis">Tennis</option>
<option value="Football">Football</option>
<option value="Other">Other</option>
<option value="Baseball">Baseball</option>

But failed to put either of these two responses into below HTML select tags.

<select id="showSubCats"></select>

jQuery is running correctly. I can alert these values. How to put these values into select tags like?

<select id="showSubCats">
<option value=""></option>
<option value="Lacrosse">Lacrosse</option>
<option value="Squash">Squash</option>
<option value="Basketball">Basketball</option>
<option value="Swimming">Swimming</option>
<option value="Golf">Golf</option>
<option value="Tennis">Tennis</option>
<option value="Football">Football</option>
<option value="Other">Other</option>
<option value="Baseball">Baseball</option>
</select>

And the jQuery

jQuery(function(){
    jQuery('#search_subcategory').css('display','none');
    jQuery('#search_category_loader').css('display','none');
    jQuery('#search_category').on('change',function(){
        var category = jQuery(this).val();
        jQuery('#search_category_loader').css('display','block');
        jQuery.ajax({
            type: 'POST',
            data: {'ajaxreturn':131, 'searchCat': category},
            url: '<?php bloginfo('url') ?>/',
            //success:function(result){
            success: function(data){
                jQuery('#showSubCats').html(data); 
                jQuery('#search_subcategory').css('display','block');
                jQuery('#search_category_loader').css('display','none');
            },
            dataType: "html"
        });
    });
});

I have edited my question, and have written jquery part of my question — Riz, Mar 28 '14 at 12:06
Why don't you build the full `select` code in your PHP response? Also, I don't understand how the `ajax.url` is even working with the value ``... See a [working plugin](http://stackoverflow.com/a/15813761/1287812). — brasofilo, Mar 28 '14 at 12:16
you managed to see on fiddler that the response from server is what you expected? — knightsb, Mar 28 '14 at 12:19
actually I am working on wordpress that's why I used . and php script is written in functions.php. let me try to build full select code. thanks for your response. — Riz, Mar 28 '14 at 12:23

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

a similar question can help you, for you'r convenience, try this:

$("#showSubCats").empty().append(data);

edited May 23 '17 at 12:11

Community

1
1

answered Mar 28 '14 at 12:23

knightsb

337
3
11

How to put AJAX response in select tag?

1 Answers1