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
– Guffa, Commented Sep 3, 2011 at 10:04

Community · Accepted Answer · 2017-05-23 12:04:27Z

3

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/

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Sep 3, 2011 at 9:58

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rafay · Accepted Answer · 2011-09-03 09:46:09Z

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 3, 2011 at 9:46

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

Guffa · Accepted Answer · 2011-09-03 09:53:58Z

2

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

answered Sep 3, 2011 at 9:53

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Matthew Abbott · Accepted Answer · 2011-09-03 09:43:28Z

0

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

answered Sep 3, 2011 at 9:43

Matthew Abbott

61.7k9 gold badges108 silver badges131 bronze badges

Collectives™ on Stack Overflow

jQuery find() on object created from a string

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related