Question

我正在使用以下函数来捕获div内容。

function getHtml(div) {
    div.find("input").each(function () {
        $(this).attr("value", $(this).val());
    });
    return div.html();
}

并抓住以下数据

var updateSearchContent = getHtml($('#someform'));

但是如果div中有任何选择框并且我更改了它的值，则该函数仅捕获具有默认值的初始状态。

我该如何解决这个问题？如果我更改选择框值，则应将更改值保存为默认值。

Answer 1

我认为你错过了循环中的select元素。如果我不对，请告诉我。

试试这个

function getHtml(div) {
    div.find("input, textarea, select").each(function () {
        $(this).val($(this).val());
    });
    return div.html();
}

Answer 2

如果div中有select，则需要绑定change事件以在值发生变化时获取值：

$('#someform').on('change','selecttags', function() {
    alert( $(this).find(":selected").val() );
});

请注意，select确实允许选择多个值，因此返回值可能是一个值数组。

如果复选框和单选按钮包含在表单中，因为它们具有不同的值集，也需要考虑复选框和单选按钮。

来自另一个问题的说明：

$('select').prop("type");

将返回“select-one”或“select-multiple”，具体取决于“multiple”属性

有关输入类型检测的完整讨论，请参阅此问题：How to get input type using jquery?

Answer 3

我已将getHtml函数更改为以下内容，因此它可以将所选值保存在更新的html内容中。

function getHtml(div) {
        div.find("input, select, textarea").each(function () {
            var $this = $(this);
            if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) {
                if ($this.prop("checked")) {
                    $this.attr("checked", "checked");
                }
            } else {
                if ($this.is("select")) {
                    $this.find(":selected").attr("selected", "selected");
                } else {
                    $this.attr("value", $this.val());
                }
            }
        });
        return div.html();
    }

更改selectbox值后获取html内容

3 个答案: