序列化表单中select元素缺失问题及提交逻辑咨询

Hey there! Let's figure out why your <select> elements are vanishing when you use .find() to filter hidden fields before serializing the form.

The Root of the Difference #

Let's break down how jQuery's serialize() behaves in both scenarios:

1. When you call $('.frm-Submit').serialize() directly:
   jQuery scans the entire form for all valid form controls (including <input>, <select>, <textarea>, etc.) that meet these criteria:

   • Have a name attribute
   • Are not disabled
   • Aren't excluded by default (like type="submit" or type="reset" buttons)
     It doesn't care if the control is visible or hidden—hidden controls (even <select> elements with display: none) will still be included in the serialized data, as long as they meet the above rules.

2. When you add .find() into the mix:
   The problem almost always lies in the selector you're using with .find(). Here are the two most common culprits:

   • You're only targeting <input> elements: If your code looks like $('.frm-Submit').find('input:not(:hidden)').serialize(), you're explicitly telling jQuery to only look for input elements. <select> elements won't match this selector, so they get left out entirely.
   • Your :not(:hidden) filter is excluding visible <select> elements: jQuery's :hidden selector considers an element hidden if it's not visible on the page—this includes elements whose parent is hidden (even if the <select> itself has display: block). If your <select> is nested inside a hidden container, .find(':not(:hidden)') will skip it, even though serialize() would have included it normally.

How to Fix It #

If your goal is to exclude only hidden input fields (like type="hidden") but keep visible <select> elements, adjust your selector to target all form controls except hidden inputs:

// Target all form controls (:input includes select, input, textarea, button)
// Exclude only type="hidden" inputs, not other hidden elements
var filteredData = $('.frm-Submit').find(':input:not([type="hidden"])').serialize();

If you want to exclude all invisible elements (regardless of type) but make sure <select> elements are included when visible, use a selector that explicitly includes them:

// Include visible inputs, selects, and textareas
var filteredData = $('.frm-Submit').find('input:not(:hidden), select:not(:hidden), textarea:not(:hidden)').serialize();

Quick Test to Confirm #

To verify which selector is causing the issue, run this in your browser's console when the form is loaded:

// Check how many select elements are matched by your find() selector
console.log($('.frm-Submit').find(YOUR_SELECTOR).filter('select').length);

If the output is 0, that confirms your selector isn't picking up the <select> elements—adjust it to include them, and your serialized data will have the select values again.

内容的提问来源于stack exchange，提问作者espresso_coffee