Question

我需要从列表值中添加动态字段，我有这个：

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"))
    }
});

这很好用，但我想添加一个＆＃34;添加字段＆＃34;按钮这样做，我怎么做？

Answer 1

它很简单。您不必将代码编入onchange，而是将其绑定到click event的{{1}}。

例如，假设您button button。 id - #addField的{{1}}将是

click event

Answer 2

您会将select inverse事件的逻辑移动到按钮的class Fooditem < ApplicationRecord has_many :fooditemprices, dependent: :destroy, inverse_of: :fooditem end class Fooditemprice < ApplicationRecord belongs_to :fooditem, inverse_of: :fooditemprices end事件。

类似于：

.change()

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

Answer 3

试试这个：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);
});

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

3 个答案: