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，但不对结果执行任何操作。在将其添加到DOM之前，您需要减少AJAX调用返回的HTML片段：

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

这是一个working example。请注意，option和.category之间存在无空格。您当前的选择器将匹配.category元素后代的option元素。

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”的匹配。

在ajax响应之后找到html代码

3 个答案: