jQuery find() on object created from a string

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

Regading your edit; I can't find anything like the code from the original question in the code that you are actually using. So, what part of the code is it that you are having problems with? — Guffa, Sep 03 '11 at 10:04

score 3 · Answer 1 · answered Sep 03 '11 at 09:46

3

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/

answered Sep 03 '11 at 09:46

Rafay

30,950
5
68
101

score 3 · Accepted Answer · edited May 23 '17 at 12:04

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/

score 2 · Answer 3 · answered Sep 03 '11 at 09:53

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.)

score 0 · Answer 4 · answered Sep 03 '11 at 09:43

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']")...

jQuery find() on object created from a string

4 Answers4