Question

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>;

However, 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();">

Answer 1

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/