javascript - 通过下拉菜单(选择选项)动态创建输入字段

Question

我有一个选择选项，但我需要您在单击选项时，使用所选值生成一个新的输入字段，因此它会从选择选项中删除，当您在旁边生成输入字段时，还会生成一个标记删除此输入字段，当我删除此输入字段时，该值将返回到其选择选项。

或多或少是这样的(我会用图片解释):

和

当点击标签“删除”时，它会返回到“选择选项”。

然后回来

我使用以下链接作为示例:

http://jsfiddle.net/jaredwilli/tZPg4/4/ CREATE INPUT FIELDS DYNAMIC

http://jsfiddle.net/cqjJy/ CREATE INPUT FIELDS FROM SELECT OPTION

    $(function () {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function () {
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#remScnt').live('click', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

$(document).ready(function () {
    $("#claim").change(function () {
        $("#area").find(".field").remove();
        //or
        $('#area').remove('.field');
        if ($(this).val() == "Val1") {
            $("#area").append("<input class='field' type='text' />");

        }
    });

});

注意:此代码是链接示例。

谢谢，希望你能帮忙:)

Answer 1

写:

$(document).ready(function () {
     $("#claim").change(function () {
         $("#area").append("<div><input class='field' type='text' value='" + $(this).val() + "'/><label class='remove'>Remove</label></div>");
         $(this).find("option:selected").remove();
     });
     $("#area").on("click", ".remove", function () {
         var val = $(this).parent().find("input").val();         
         $("#claim").append("<option value='" + val + "'>" + val + "</option>");
         $(this).parent().remove();
     });
 });

Fiddle here.