jquery - ajax响应后查找html代码

Question

Java 脚本代码

$("#category select").change(function(){
    var category = $('select option:selected').html();

    $.ajax({
        type:"Post",
        url:"collectiepost.php",
        data:"category="+category,
        cache:"false",
        success:function(html){

    $("select").html(html).find("option .category");

        }

        });
    });
}); 

该页面上的 html 输出 collectiepost.php

<select id="ontwerper">
  <option class="desinger">vikas</option>
</select>
<select id="category">
 <option class="category">cloth1</option>
 <option class="category">cloth2</option>
</select>

我只想提取 html 的那部分

需要输出

  <select>
  <option class="category">cloth1</option>
  <option class="category">cloth2</option>
  </select>

问题

但是我的代码显示了所有这样的选项标签

  <select>
  <option class="desinger">vikas</option>
  <option class="category">cloth1</option>
  <option class="category">cloth2</option>
  </select>

Answer 1

这一行：

$("select").html(html).find("option .category");

将select元素的内容设置为html，然后调用find但对结果不执行任何操作。在将 AJAX 调用返回的 HTML 片段添加到 DOM 之前，您需要减少它：

$("select").html($(html).find("option.category"));

这是一个工作示例。注意和之间没有空格。您当前的选择器将匹配作为元素后代的元素。option.category.categoryoption

Answer 2

$("select").html(html).find("option:not(.category)").remove();

代替

$("select").html(html).find("option .category");

Answer 3

您可以查询数据，所以只需

$("select").html($("option.category", html));

找到选择框，从 ajax html 中插入“option.category”的匹配项。