jQuery find() on object created from a string

I have a string with a value such as <select name="id"></select>.

As I'd like to popupate that select, I thought of doing something like this to find the select, and popupate it afterwards:

$("<select name="id"></select>").find('select').html('<option value="1">Test</option>;

How开发者_开发问答ever, it seems that $("<select name="id"></select>") doesn't match anything.

What am I doing wrong?

Edit: Okay, posting the whole code:

I have a <script type="text/html"> element with a prototype form in it:

<ul id="advanced_search_fields"></ul>
<script type="text/html" id="prototype_fields">
    <select name="search[__i__][field]" class="field_selector">
        <option></option>
        <option data-type="choice" value="10">Bank</option>
    </select>
</script>

<script type="text/javascript">
    var field_config = {"10":{"choices":["Choice 1","Choice 2","Choice 3","Other"]}};
</script>

<script type="text/html" id="prototype_choice">
    <select name="search[__i__][value]"></select>
</script>

<script type="text/javascript">
    var srch_list = $('#advanced_search_fields');
    var add = function(){
        srch_list.append('<li>' + $('#prototype_fields').html() + '</li>');
    };
    var change_field = function(){
        $(this).parent().find('span.field').remove();
        $(this).parent().data('id', $(this).val());
        change_field_to_type($(this).val(), $(this).find('option:selected').data('type'), $(this).parent());
    };
    var change_field_to_type = function(id, type, li){
        var prototype = $('#prototype_' + type).html();
        var formHtml = "";

        switch(type)
        {
            case "choice":
                var select = $(prototype).filter('select');

                $(field_config[id]['choices']).each(function(i, val){
                    select.append(
                        $('<option></option>')
                        .attr('value', val)
                        .text(val)
                    );
                });
                formHtml = prototype;
            break;
        }
        li.append('<span class="field">' + formHtml + '</span>');
    };

    $('.field_selector').live('change', change_field);
    add();
</script>

<input type="button" value="+" onclick="add();">

Find won't find anything in your <select name="id"></select> string as it's looking for a 'select' element inside the select tags. See this answer for further info -

Using jQuery to search a string of HTML

You could try something like this -

var html= '<select name="id"></select>';
var $select = $('<div></div>').append(html);
$select.find('select').append('<option value="1">Test</option>');
alert($select.html());

Working demo - http://jsfiddle.net/ipr101/U5LPw/

you need to append it to something

$("<select name='id'></select>").append('<option value="1">Test</option>').appendTo("div");

here is the fiddle http://jsfiddle.net/hRFYF/5/

You are creating a new select element, so the jQuery object that you get only contains that element. Using find searches for matches inside that element, so naturally there will be no match.

You don't need to use find at all, as the jQuery object only contains that single element:

var sel = $('<select name="id"></select>').html('<option value="1">Test</option>');

(Also, you were using quotation marks inside a string delimited by quotation marks, there was no matching end apostrophe for the string containing the option, and there was no ending parenthesis for the html method call.)

You're creating a new element, not selecting an existing element. If you don't then append that element to the DOM, you won't see the result. Try:

$("<select name=\"id\"></select>").appendTo($("body"));

If you actually intend to select the existing element, change the selector:

$("select[name='id']")...