Question

我有代码，您可以在jquery中使用.append（）和.remove（）添加或删除文本框，现在我想要内插由逗号分隔的文本框的所有值，并将其传递到位于脚本外部的另一个文本框。我该怎么做？这是dymically添加和删除文本框的代码。（不是我的，只是在stackoverflow中得到它） HTML：

<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />

的javascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
    var div = $("<div />");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
    var values = "";
    $("input[name=DynamicTextBox]").each(function () {
        values += $(this).val() + "\n";
    });
    alert(values);
});
$("body").on("click", ".remove", function () {
    $(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;' +
        '<input type="button" value="Remove" class="remove" />'
}
</script>

Answer 1

使用.val()设置value＆＃34;另一个文本框＆＃34;到values

＆＃13;

$(function() {
  $("#btnAdd").bind("click", function() {
    var div = $("<div />");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
  });
  $("#btnGet").bind("click", function() {
    var values = 
      $.map($("input[name=DynamicTextBox]"), function(el) {
        return el.value
      }).join(",\n");
    $("#anotherTextbox").val(values);
  });
  $("body").on("click", ".remove", function() {
    $(this).closest("div").remove();
  });
});

function GetDynamicTextBox(value) {
  return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;' +
    '<input type="button" value="Remove" class="remove" />'
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
  <!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
<input id="anotherTextbox" type="text" />

＆＃13;

使用jQuery动态添加和删除TextBox并获取动态TextBox的值，并将其显示在文本框中

1 个答案: