【问题标题】：How do I dynamically add new items to dropdown list within this form using jquery?如何使用 jquery 将新项目动态添加到此表单中的下拉列表？
【发布时间】：2015-11-29 02:36:23
【问题描述】：

$(document).ready(function() {
    var element;
    $(".form-element").on("mousedown", function(event){
    element = $('<form><select name="dropdown"><option>Select...</option><option value="new-dropdown">add new...</option><option value="machine3">Machine 3</option><option value="machine4">Machine 4</option></select></form>');
    $("#body-div").append(element);
    });
});

列表中的项目目前只是用于测试。但我需要能够单击添加新选项并添加新列表项。

【问题讨论】：

请给你看 html 或小提琴。

标签： javascript jquery html forms

【解决方案1】：

Working Fiddle

您似乎在尝试动态添加整个表单，但您只需要在表单的 select 部分添加额外的 option 元素即可。

为此添加此 HTML

HTML

<input id="text-to-add" type="text" value="Machine 3">
<button id="new-item">Add to dropdown</button>
 <form>
     <select name="dropdown">
         <option>Select...</option>
         <option>Machine 1</option>
         <option>Machine 2</option>
     </select>
</form>

然后使用append jQuery 函数动态添加选择元素。

jQuery

$(document).ready(function () {
    $('#new-item').click(function() {
        console.log($('#text-to-add').val());
        $('select').append( '<option>' + $('#text-to-add').val() + '</option>' );
    });
});

【讨论】：

谢谢你这样做了！我很欣赏你的专业知识。我会投票，但我还没有代表。
没问题，很高兴为您提供帮助！

【解决方案2】：

首先为select标签和option标签添加一个新的id，值为“new option”；

element = $('<form>
<select name="dropdown" 
id="sel"><option>Select...</option>
<option value=
"new-dropdown"id="anew">add new...
</option></select></form>');

现在我假设您已经拥有该选项的值和文本的值，让它们分别为 x 和 y；现在向 #anew 添加一个 onClick 处理程序，以将带有值 x 和文本 y 的新选项附加到 #sel：

z=$('<option value="'+x+'">'+y+'</option>');

$("#anew").onClick(function(){
$("#sel").append(z);
});

希望它能解决你的问题

【讨论】：