如何使用JavaScript实现HTML下拉选择框的联动禁用与启用

You can easily implement this behavior using vanilla JavaScript by adding an event listener to the first dropdown. Here's a straightforward, step-by-step solution:

Step 1: Optional (but helpful) HTML tweak #

While not required, adding unique IDs to your dropdowns simplifies selecting them in JavaScript. If you prefer to keep your original markup, you can skip this and use the name attribute instead (shown later):

<select name="method" required class="form-control" id="paymentMethod">
  <option value="1">Cash</option>
  <option value="2">Credit</option>
</select>
<select name="method2" class="form-control" id="additionalMethod">
  <?php while (...) { echo '<option value="id">Title</option>'; } ?>
</select>

Step 2: Add the JavaScript functionality #

Place this script at the end of your <body> tag (or wrap it in a DOMContentLoaded listener if putting it in the <head>):

// Get references to both dropdown elements
const paymentMethod = document.getElementById('paymentMethod');
const additionalMethod = document.getElementById('additionalMethod');

// Function to toggle the second dropdown's enabled state
function updateAdditionalMethodState() {
  // Disable if Cash is selected (value = 1)
  if (paymentMethod.value === '1') {
    additionalMethod.disabled = true;
  } else {
    // Enable if Credit is selected
    additionalMethod.disabled = false;
  }
}

// Set initial state on page load (since Cash is the default option)
updateAdditionalMethodState();

// Trigger the function whenever the first dropdown's selection changes
paymentMethod.addEventListener('change', updateAdditionalMethodState);

Alternative: Using name attribute instead of IDs #

If you don't want to add IDs, select the elements directly by their name attribute:

const paymentMethod = document.querySelector('select[name="method"]');
const additionalMethod = document.querySelector('select[name="method2"]');

// The rest of the code stays identical to the example above

How it works: #

• The updateAdditionalMethodState function checks the selected value of the first dropdown. If it's 1 (Cash), it disables the second dropdown; if it's 2 (Credit), it enables it.
• We call the function once when the page loads to ensure the second dropdown starts in the correct state (matching the default selected option).
• The change event listener triggers the function every time the user picks a new option in the first dropdown, keeping the state in sync.

This is a lightweight, browser-compatible solution that doesn't require any external libraries.

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