jQuery 序列化隐藏（显示：无）表单元素不起作用。解决方法？

Question

我有以下问题：

我有一个需要序列化的表单，但我正在使用 javascript 来更改选择字段的外观。这意味着，使用 display:none 隐藏真正的选择字段。 我现在的问题是，jQuery 确实识别隐藏的选择，但只序列化第一个值而不是选定的值。

<select name="publish">
<option value="1">yes</option>
<option value="2" selected="selected">no</option>
</select>

jQuery.serialzie: 发布=1

所以它给了我第一个而不是正确的值。

有什么解决方法的想法吗？

解决方案
好的，正如 RobW 所提到的，最好的解决方案可能是让 JavaScript 通过设置 selectElement.selectedIndex = 5

来选择您想要的选项

但是我的解决方案有点不同，因为我不想更改用于更改我的选择外观的插件，因为维护问题（例如，每次发布新版本时都需要更改脚本） . 我只是使用了一个自定义函数进行序列化。

(function($) {
$.fn.serializer = function() {
    var toReturn    = [];
    var elements         = $(this).find(':input').get();
    $.each(elements, function() {
        if (this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password/i.test(this.type))) 
        {
            var val = $(this).val();
            // if is select, check selected
            if(this.nodeName == "SELECT")
            {
                val = $(this).find('option:selected').val();    
            }
            toReturn.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( val ) );
        }
    });
    return toReturn.join("&").replace(/%20/g, "+");
}
})(jQuery);

Answer 1

如果问题是由隐藏元素引起的，请在序列化之前暂时显示它们：

var $form = $('#myForm');
var hidden = $form.find(':hidden'); // Select all hidden elements
hidden.show();                      // Show them
var string = $form.serialize();     // Serialize form
hidden.hide();                      // Hide them again

编辑：您似乎正试图通过设置selected=selected 属性来选择一个选项。您应该使用selectedIndex 更改所选选项：

var select = $("#myselect")[0]; //DOM element
select.selectedIndex = 5;       //Example, select 6th option

Answer 2

可以使用原生js

例子

    var form = document.querySelector('#form');
    var data = new FormData(form);
    var string = new URLSearchParams(data).toString();