如何使用 jquery 动态地将新项目添加到此表单内的下拉列表中?

2023-12-29

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

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


工作小提琴 http://jsfiddle.net/adriancarriger/m5mgqp0x/

看起来您正在尝试动态添加整个表单,但您只需要添加额外的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>

然后要动态添加选择元素,请使用附加 jQuery http://api.jquery.com/append/功能。

jQuery

$(document).ready(function () {
    $('#new-item').click(function() {
        console.log($('#text-to-add').val());
        $('select').append( '<option>' + $('#text-to-add').val() + '</option>' );
    });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 jquery 动态地将新项目添加到此表单内的下拉列表中? 的相关文章