Question

我有以下问题：

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

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

jQuery.serialzie：publish = 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

jQuery serialize hidden（display：none）表单元素不起作用。解决方法？

1 个答案: