Question

我有一个字符串，其值为<select name="id"></select>。

由于我想弹出那个选择，我想做这样的事情来找到选择，然后弹出它：

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

但是，似乎$("<select name="id"></select>")与任何内容都不匹配。

我做错了什么？

修改：好的，发布整个代码：

我有一个<script type="text/html">元素，其中包含原型表单：

<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

你需要将它附加到某物

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

这里是小提琴http://jsfiddle.net/hRFYF/5/

Answer 2

查找在<select name="id"></select>字符串中找不到任何内容，因为它正在查找select标记内的'select'元素。有关详细信息，请参阅此答案 -

Using jQuery to search a string of HTML

你可以尝试这样的事情 -

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

工作演示 - http://jsfiddle.net/ipr101/U5LPw/

Answer 3

您正在创建一个新的select元素，因此您获得的jQuery对象仅包含该元素。使用find搜索里面那个元素的匹配项，所以自然不会有匹配。

您根本不需要使用find，因为jQuery对象只包含该单个元素：

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

（另外，你在用引号分隔的字符串中使用引号，对于包含该选项的字符串没有匹配的结束撇号，并且html方法调用没有结束括号。）< / p>

Answer 4

您正在创建 new 元素，而不是选择现有元素。如果您没有append该元素到DOM，您将看不到结果。尝试：

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

如果您确实打算选择现有元素，请更改选择器：

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

jQuery find（）在从字符串创建的对象上

4 个答案: