Question

Java Script code

$("#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 output on that page 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>

i want to extract only that part of html

need output

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

problem

but my code showing all option tag like that

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

Answer 1

This line:

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

Will set the content of the select element to html, and then call find but do nothing with the result. You need to reduce the HTML fragment returned by your AJAX call before adding it to the DOM:

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

Here’s a working example. Notice that there is no space between option and .category. Your current selector will match .category elements that are descendants of option elements.