Question

在表单中，我需要从select中动态添加（然后删除）一些字段（0到n）。

添加后，每个项目都应从列表中删除，因此无法选择两次。

例如，我有一个像这样的选择：

 <select name="list">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
  </select>

我想在我的表单中添加一个新字段，显示A和D并存储它们的值，以便我可以通过POST获取它。然后，如果我点击选择，就会有B和C.

你能帮助我吗？

Answer 1

您想要什么类型的字段？输入类型文字？如果是这样的话：

$("[name=list]").on("change", function (e) {
    var val = $(this).val();
    if (val.length > 0) {
        $(this).find("option:selected").remove();
        $("<input>").attr("name", "the-name").val(val).appendTo($("#the-form"))
    }
});

查看小提琴https://jsfiddle.net/etoysp7b/1/

Answer 2

我猜你正在寻找这个，

$("select[name='list']").on('change',function(){
   var b=$(this).val();
    if(b!=0){
    $("#s1").append("<input type='text' name='newname"+b+"' value='"+$(this).find("option:selected").text()+"'/>");
    $(this).find("option[value='"+b+"']").remove();
    }
});

AND

<form id="s1">
<select name="list">
     <option value="0">Select an option</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
  </select>


</form>

Answer 3

您也可以尝试以下选项：1。http://www.virtuosoft.eu/code/bootstrap-duallistbox/ 2. https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/index.htm#demos/jqxlistbox/dragdrop.htm

从列表中动态选择字段并将其添加到表单中

3 个答案: