如何在选择标记中放置AJAX响应?

时间:2014-03-28 12:00:56

标签: ajax wordpress

这是我的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>

当我选择任何选项时,在更改时调用jQuery AJAX。这是JSON响应

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

我也试图像这样获取HTML响应

<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>

但是未能将这两个响应中的任何一个放入HTML select标签下面。

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

jQuery正常运行。我可以提醒这些价值观。如何将这些值放入选择标签中?

<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>

和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"
        });
    });
});

1 个答案:

答案 0 :(得分:0)

similar question可以帮到你, 为方便起见,试试这个:

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