-1

我希望能够允许用户在 HTML 选择下拉列表中添加自己的选项。除了获取值并在选择菜单下创建“选项”的部分之外，我编写了大部分代码。

HTML

<li id="add_1_parent">
    <div>
        <select width="100" class="add_select add_referral">
            <option value="">Incorporation</option>
            <option value="">Corporation</option>
            <option value="">Limited Liability Corporation</option>
            <option value="">Sole Proprietor</option>
        </select>
        <a href="#" id="add_1_child">Add</a>
    </div>    
</li>

JS

$(document).ready(function() {
    $('#add_1_child').click(function() {
        $('#add_1_parent').append('<input id="add_1_foster_add" class="add_input" type="text" size="50" class="" value="" maxlength="255"/><a href="#" id="add_1_foster_child">Add</a>');
    });
    $('#add_1_foster').click(function() {
        // Add the value to the select HTML here..?
    });
});

http://jsfiddle.net/HWRWv/

单击"Add"按钮时，它需要显示一个文本框。

当您单击定义的第二个添加时，"add_1_foster_child"它需要将值从 中取出input，将其变为菜单<option>下的一个。select

我不知道该怎么做是从中获取值input并将其放入select菜单中。

4

2 回答 2

4

您可以简单地通过使用该.append()函数并构造所需 HTML 的字符串来添加项目。让 jQuery 为您添加它。

var option_value = 42;
var option_text = "Meaning to life the Universe and Everything";
$('#select_id').append('<option value="'+option_value+'">'+option_text+'</option>');

如评论中所述，您绝对应该采取一些预防措施来防止您的用户添加可能会影响您网站布局的条目 - 例如，如果有人要输入一些实际的 HTML 代码。感谢@Jason的洞察力。

于 2012-07-27T22:29:26.993 回答
0

我猜这就是你所追求的：

$(document).ready(function() {
    $('#add_1_child').on('click', function() {
        var html = '<div class="add_container"><input class="add_input" type="text" size="50" maxlength="255"/><a href="#" class="add_link">Add</a></div>';
        $('#add_1_parent').append(html);
    });

    $('#add_1_parent').on('click', '.add_link',function() {
        var option = $('<option value="">'+$(this).prev('.add_input').val()+'</option>');
        $('.add_select').append(option);
        $('.add_container').remove(); //removes the add input after submission, optional ?
    });
});​

小提琴

于 2012-07-27T22:53:54.940 回答