选择填充数据的表单元素答案

【问题标题】：Select form elements with filled data选择填充数据的表单元素
【发布时间】：2015-10-28 21:41:16
【问题描述】：

这个问题真的很简单。

我使用.html() 来获取一个div 的html 代码。 div 包含用户填写的表单元素。

.html()只返回html代码，不保留填充文本。

有没有办法轻松地保留/复制 html 元素中的文本？

PS。我已经知道了

.val()

将返回值，但我需要

html代码+所有值

为了将表单复制/粘贴到其他地方。

【问题讨论】：

看起来像 XY Problem 问题。您可能想考虑FormData
您可以设置一个 keydown 事件来更新 value 等元素的属性，例如 $("#id").on("keydown", function() { $(this).attr("value", $(this).val()); }); 但我不知道这是否可行。或者，您可以改用attr("data-value", 。但同样，我不知道这些对你有用。
嗯.. @jwatts1980 这听起来很有趣。
试试这个@glarkou jsfiddle.net/db9prvmt。让我知道这是否适合你
@Sushil 我们可以让它也适用于下拉菜单吗？

标签： javascript jquery

【解决方案1】：

正如@Madness 建议的那样，您可以使用.clone() 来获取html 以及值。

唯一的问题是 select 值不会被克隆（似乎是 jquery 中的一个已知错误。请参阅此票以获取更多信息 http://bugs.jquery.com/ticket/1294）。所以我添加了一个解决方法来解决这个问题。我要做的是在我clone 之前取变量中的所有选择值，就像这样

var selects = $('#myDiv:first').find("select");

这里myDiv是div的id

最终的jquery 代码如下所示

$(function() {
    $('button').on('click', function() {
        var selects = $('#myDiv:first').find("select");
        var html = $('#myDiv:first').clone(true);


        $(selects).each(function(i) {
            console.log($(this).val());
            var select = this;
            $(html).find("select").eq(i).val($(select).val());
        });
        $('#htmlWithVal').html(html);
    });
});

这是一个同样有效的 JSFIDDLE。希望这会有所帮助。

【讨论】：

不客气 :) 很高兴能为您提供帮助。

【解决方案2】：

你会得到这样的输入值：

$('#inputid').val();

其中#inputid是输入框的id。

【讨论】：

是的，我知道。我需要在 html 代码中有 val()。
你用 .clone() 来做这件事有多种方法取决于你的具体情况，check this out