Javascript：使用按钮动态添加选择输入中的字段

Question

i need to add dynamically fields from a list values, i have this one:

HTML:

<select name="list">
    <option>Select One</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

JS:

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

This works fine, but i want to add a "Add field" button to do this, how i can do that?

Answer 1

Its just simple. Instead of writing your code into onchange , you bind it to click event of your button .

For example, say you have button with id - #addField . Your click event for button would be

$("#addField").on('click',function(){
    var val = $("[name=list]").val(); //get the selected val from select element
    if (val.length) {
        $("<input>").attr("name", "the-name").val(val).appendTo($("#the-form"))
    }
});

Answer 2

You will move the logic of the .change() event of select to the .click() event of the button.

something similar to:

$("#btnId").on("click", function (e) {
    var val = $("[name=list]").val();
    if (val.length > 0) {
        $("<input>").attr("name", "the-name").val(val).appendTo($("#the-form"))
    }
});

where btnId is the id of the button

Answer 3

try this : https://jsfiddle.net/qact415y/

<select id="list">
<option>Select One</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

// enter the text you want to add to the combo
<input type="text" id="input"/>
<button name="add">Add</button>


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

$("[name=add]").on("click", function (e) {
        console.log("add");
    var x = document.getElementById("list");
    var option = document.createElement("option");
    option.text = document.getElementById("input").value;
    x.add(option);
});