下拉框关联字段显隐的冗长JS脚本优化方案咨询

Hey there! Controlling 100 form fields across 17 dropdown options with repetitive show()/hide() calls is definitely a maintenance headache. Let's refactor this into a clean, scalable solution that'll make updates way easier down the line.

Step 1: Create a Visibility Configuration Map #

First, we'll separate your visibility rules from the logic by storing them in a plain JavaScript object. This maps each dropdown option value to the list of field IDs that should be shown/hidden, making edits straightforward.

// Define your visibility rules in a single, easy-to-edit object
const fieldVisibilityConfig = {
  "Apartment": {
    // List all field IDs that should be shown for this option
    show: [
      "20", "19", "1176", "1063", "1177", "1078", "1179", 
      "1191", "1192", "1193", "1091", "1006", "1080", "1136", 
      "1137", "1167", "1166", "1181", "1182", "1183", "1168", 
      "1140", "1141", "1142", "1143", "1144", "1145", "1146", 
      "1147", "1170", "1095", "1148", "1092", "1093", "1094", 
      "1057", "1186", "1169", "1005"
    ],
    // List all field IDs that should be hidden for this option
    hide: [
      "1194", "1195", "1196", "1197", "1198", "1199", "1200", 
      "1201", "1172", "1202", "1203", "1071", "1211", "1212", 
      "1204", "1000", "1084", "1085", "1087", "1086", "1088", 
      "1089", "1013", "1138", "1205", "1061", "1206", "1207", 
      "1208", "7", "1187", "1003", "1044", "1209", "1101", 
      "1002", "1103", "1104", "1105", "1106"
    ]
  },
  // Add configurations for your other 16 dropdown options here
  "Villa": {
    show: ["1194", "1195", "1196", /* ... other relevant IDs ... */],
    hide: ["20", "19", /* ... other relevant IDs ... */]
  }
  // ... more options
};

Step 2: Write a Reusable Handling Function #

Next, we'll create a single function that handles visibility updates based on the selected dropdown value. This eliminates repetitive code and centralizes all logic in one place.

$(document).ready(function() {
  const dropdown = $('#inputOption_1_2');

  // Reusable function to update field visibility
  function updateFieldVisibility(selectedValue) {
    // Get the config for the selected option (fallback to empty if no config exists)
    const config = fieldVisibilityConfig[selectedValue] || { show: [], hide: [] };

    // Batch-show all required fields
    config.show.forEach(fieldId => $(`#${fieldId}`).show());
    // Batch-hide all excluded fields
    config.hide.forEach(fieldId => $(`#${fieldId}`).hide());
  }

  // Listen for dropdown changes
  dropdown.on('change', function() {
    updateFieldVisibility($(this).val());
  });

  // Initialize visibility on page load (matches the initial dropdown value)
  updateFieldVisibility(dropdown.val());
});

Step 3: Bonus Optimizations for Even Better Maintainability #

If you want to reduce configuration bloat further, consider these tweaks:

Option A: Use CSS Classes for Field Groups #

Instead of listing individual IDs, group related fields with CSS classes (e.g., .apartment-fields, .villa-fields). Then target these groups in your config:

Update your HTML:

<!-- Add group classes to your field divs -->
<div class="col-lg-3 form-field apartment-fields" id="20">...</div>
<div class="col-lg-3 form-field villa-fields" id="1194">...</div>

Update your config and function:

const fieldVisibilityConfig = {
  "Apartment": {
    showGroups: ['.apartment-fields', '.view-fields', '.brand-fields'],
    hideGroups: ['.villa-fields', '.hotel-fields']
  }
};

function updateFieldVisibility(selectedValue) {
  const config = fieldVisibilityConfig[selectedValue] || { showGroups: [], hideGroups: [] };
  
  config.showGroups.forEach(group => $(group).show());
  config.hideGroups.forEach(group => $(group).hide());
}

Option B: Default Hide All Fields First #

If most fields should be hidden by default for any option, first hide all fields, then only show the required ones. This cuts your config in half:

function updateFieldVisibility(selectedValue) {
  // Hide all form fields first (use a common class like ".form-field")
  $('.form-field').hide();
  
  // Show only the fields for the selected option
  const config = fieldVisibilityConfig[selectedValue] || { show: [] };
  config.show.forEach(fieldId => $(`#${fieldId}`).show());
}

// Update your config to only include "show" arrays
const fieldVisibilityConfig = {
  "Apartment": {
    show: ["20", "19", /* ... all IDs to show ... */]
  }
};

Why This Works #

• Separation of Concerns: Your visibility rules live in a single, readable config—no more digging through hundreds of lines of show()/hide() calls.
• Scalability: Adding or modifying dropdown options only requires updating the config object, not touching the core logic.
• Consistency: The initialization step ensures fields are correctly visible/hidden when the page loads, not just when the dropdown changes.

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