通过下拉（选择选项）动态创建输入字段

Question

我有一个选择选项，但我需要你点击一个选项，生成一个带有所选值的新输入字段，因此它从选择选项中删除，当你生成输入字段旁边也生成一个标记到删除此输入字段，当我删除此FIeld输入时，该值将返回其选择选项。

或多或少这样的事情（我将用图片解释）：

和

点击标签删除后，在选择选项时返回。

并返回

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

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.