如何修改JavaScript，让提交按钮忽略<select>标签的内容变更

Got it, let's tweak your existing code so it only considers changes to non-<select> form elements when deciding whether to enable the submit button. Here's the adjusted version:

$(function(){
  $('form')
    .each(function(){
      // Serialize only non-select elements for initial state
      $(this).data('serialized', $(this).find(':input:not(select)').serialize());
    })
    .on('change input', function(e){
      // Ignore change events triggered by select elements
      if ($(e.target).is('select')) return;
      
      // Compare current non-select elements state to initial
      var currentState = $(this).find(':input:not(select)').serialize();
      $(this)
        .find('input:submit, button:submit')
        .attr('disabled', currentState == $(this).data('serialized'));
    })
    .find('input:submit, button:submit')
    .attr('disabled', true);
});

Key Changes Explained: #

• Initial Serialization: Instead of using $(this).serialize() directly, we use $(this).find(':input:not(select)').serialize() to capture the initial state of all form elements except <select> tags. This ensures dropdowns don't factor into the baseline comparison.
• Event Handler Guard: Added a check at the start of the change/input handler: if ($(e.target).is('select')) return; This skips processing entirely when a <select> element triggers the event, preventing unnecessary state checks.
• Current State Comparison: When checking for changes, we again serialize only non-<select> elements to match the initial baseline.

This way, any changes to text inputs, checkboxes, radio buttons, etc., will still enable the submit button, but modifying a dropdown will leave the button's state untouched.

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