Question

I am calling a page that returns data like:

<div id="class">
    <option>Value</option>
    <option>Value</option>
</div>

<div id="type">
    <option>Value</option>
    <option>Value</option>
</div>

I am trying to filter the data so that I can cycle through each one and insert the option values into the correct section drop down list for them. I even extended the data so that I could try .find() on it, and made it look like:

<div id="class">
    <div class="options">
        <option>Value</option>
        <option>Value</option>
    </div>
</div>

<div id="type">
    <div class="options">
        <option>Value</option>
        <option>Value</option>
    </div>
</div>

However, it still does not work. I only get the text output, and not the html elements. So my question is, how do I keep the actual html elements when I use the .filter() command? My current code is below.

$.ajax({  
    type: "POST", 
    url: "searchFunctions.php",
    data: dataString,
    success: function(data) {
        // Create jquery object from the response html
        var $response=$(data);

        // Change styles for children
        $response.filter('div').each(function(){
            $("#"+$(this).attr("id")).html($(this).find(".options"));
        });
    }
});

Please note, I did try .text() and .html() at the end of $(this).find(“.options”) with no luck. It still only returned the value portion. But it’s weird. When I used $(this).html() (no .find(“.options.”)), I could see the tags, but still not the tags…

Thanks in advance.

Yeah, never even thought about the fact that the browser would drop the option tags due to no select tag…

Answer 1

This is because a div element can’t contain an option element in valid HTML. This will work if you wrap the options in a select rather than a div:

<select id="type">
    <option>Value</option>
    <option>Value</option>
</select>