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

时间:2015-07-27 13:41:28

标签: php jquery ajax

在表单中,我需要从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.

你能帮助我吗?

3 个答案:

答案 0 :(得分:3)

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

$("[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/

答案 1 :(得分:1)

我猜你正在寻找这个,

$("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>

答案 2 :(得分:0)