用 jquery 解析 html ajax 响应答案

【问题标题】：parse html ajax response with jquery用 jquery 解析 html ajax 响应
【发布时间】：2014-06-18 01:47:18
【问题描述】：

我有一个在列表框中被调用的函数，该函数有一个 ajax 请求检索其他列表框的选项，我试图从 ajax jquery 解析 html 响应，但它不起作用，只显示响应“数据”，我想在 html 响应中查找元素，这是我的代码

 function loadOptionsValues(id)   {

         $.ajax(
                {
            type: 'POST',
            url: baseDir + 'ajax.php',
            data: 'val_select=' + $('#'+id).text()+'&id_product='+id_product,
            dataType: "html",

            success: function(data){


               $( "select[id!='"+id+"']" ).each(function(){
               $(this).html($(html).find('#'+$(this).attr('id')).text());
               alert('text select'+$(html).find('#'+$(this).attr('id')).html());
                     });

                 }

           });
    }

响应看起来像这样

<html>                                                   

<select id="group_1">
<option id="Ecru">Ecru</option>
<option id="Gris">Gris</option>
<option id="Gris">Gris</option>
<option id="Gris">Gris</option>
<option id="Gris">Gris</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Marine">Marine</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Noir">Noir</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Rose">Rose</option>
<option id="Taupe">Taupe</option>

 </select>

 <select id="group_3">
 <option id="Cuir">Cuir</option>
 <option id="Daim">Daim</option>
<option id="Daim">Daim</option>
<option id="Daim">Daim</option>
<option id="Daim">Daim</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>
<option id="Cuir">Cuir</option>

</select>

<select id="group_2">
<option id="40">40</option>
<option id="37">37</option>
<option id="40">40</option>
<option id="39">39</option>
<option id="38">38</option>
<option id="37">37</option>
<option id="41">41</option>
<option id="36">36</option>
<option id="40">40</option>
<option id="35">35</option>
<option id="39">39</option>
<option id="38">38</option>
<option id="40">40</option>
<option id="36">36</option>
<option id="39">39</option>
<option id="38">38</option>
<option id="41">41</option>
<option id="37">37</option>
<option id="38">38</option>
<option id="37">37</option>
<option id="41">41</option>
<option id="36">36</option>
<option id="40">40</option>
<option id="35">35</option>
<option id="39">39</option>
<option id="41">41</option>

</select>
</html>

【问题讨论】：

标签： jquery ajax

【解决方案1】：

成功函数内的this 不再引用原始元素。你应该设置一个上下文变量：

function loadOptionsValues(id)   {
     var that = $(this);
     $.ajax(
            {
        type: 'POST',
        url: baseDir + 'ajax.php',
        data: 'val_select=' + $('#'+id).text()+'&id_product='+id_product,
        dataType: "html",

        success: function(data){


           $( "select[id!='"+id+"']" ).each(function(){
               that.html($(html).find('#'+that.id).text());
               alert('text select'+$(html).find('#'+that.id).html());
           });

        }

   });
}

【讨论】：

@tarekfellah -- 我在上面的示例中发布了that = $(this)