如何使用jquery在此表单中的下拉列表中动态添加新项？

Question

$(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);
    });
});

目前列表中的项目仅供测试。但我需要能够单击添加新选项并添加新的列表项。

Answer 1

Working Fiddle

您似乎尝试动态添加整个表单，但只需在表单的option部分添加其他select元素。

为此，请添加此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函数动态添加select元素。

的jQuery

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

Answer 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);
});

希望它能解决你的问题