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

问题描述：

我有代码，您可以在jquery中使用.append()和.remove()添加或删除文本框，现在我希望内插所有由逗号分隔的文本框的值，并将其传递到位于脚本外部的另一个文本框.我该怎么做?这是动态添加和删除文本框的代码. (不是我的只是在stackoverflow中得到它) HTML:

i have code where you can add or delete textbox using .append() and .remove() in jquery, now i want to implode all the value of the textboxes separated by commas and pass it into another textbox located outside the script. how can i do it? here's the code for dymically adding and removing textbox. (not mine just got it here in 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>

答

使用.val()将另一个文本框"的value设置为values

Use .val() to set value of "another textbox" to values

$(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" />'
}

<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" />

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

相关推荐