如何使用jquery在此表单中的下拉列表中动态添加新项? [英] How do I dynamically add new items to dropdown list within this form using jquery?
本文介绍了如何使用jquery在此表单中的下拉列表中动态添加新项?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
$(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);
});
});
目前列表中的项目仅用于测试。但我需要能够单击添加新选项并添加新的列表项。
The items in the list currently are just there for testing. But I need to be able to click on an add new option and add a new list item.
推荐答案
工作小提琴
看起来你试图动态添加整个表单,但你只需要添加额外的选项
元素到您的选择
部分。
为此,请添加此HTML
To do this add this 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>
然后要动态添加一个select元素,请使用追加jQuery 功能。
Then to dynamically add a select element use the append jQuery function.
$(document).ready(function () {
$('#new-item').click(function() {
console.log($('#text-to-add').val());
$('select').append( '<option>' + $('#text-to-add').val() + '</option>' );
});
});
这篇关于如何使用jquery在此表单中的下拉列表中动态添加新项?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文