$(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);
});
});
列表中的项目目前只是用于测试。但我需要能够单击添加新选项并添加新列表项。
最佳答案
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功能。
jQuery
$(document).ready(function () {
$('#new-item').click(function() {
console.log($('#text-to-add').val());
$('select').append( '<option>' + $('#text-to-add').val() + '</option>' );
});
});
关于javascript - 如何使用 jquery 将新项目动态添加到此表单中的下拉列表中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33978806/