如何根据下拉选择框选中状态设置输入框及二级下拉框为必填项

Got it, let's fix this up. The goal is to set those two text inputs and the second dropdown as required only when the first select picks "Orario Custom" (value="8"). Here's a straightforward approach with HTML tweaks and vanilla JavaScript:

Step 1: Update Your HTML #

First, add unique IDs to the text inputs so we can easily target them in JavaScript. We'll keep the existing IDs for the selects since they're already in place:

<!-- First Select Box -->
<select name="AMC_metavalue_tipologia_evento" id="AMC_metavalue_tipologia_evento">
  <option value="" disabled selected>Ingresso Singolo?</option>
  <option value="8" '.selected( $AMC_metakey_tipologia_evento, '8', false ) . '>Orario Custom</option>
  <option value="0" '.selected( $AMC_metakey_tipologia_evento, '0', false ) . '>Annulla orario Custom</option>
</select>

<!-- Text Inputs (added unique IDs) -->
<input type="text" id="prezzo-pista-uomo" name="AMC_metavalue_primo_orario_prezzo_pista_uomo" value="'.esc_attr( $AMC_metakey_primo_orario_prezzo_pista_uomo ).'"/>
<input type="text" id="prezzo-pista-donna" name="AMC_metavalue_primo_orario_prezzo_pista_donna" value="'.esc_attr( $AMC_metakey_primo_orario_prezzo_pista_donna ).'"/>

<!-- Second Select Box (already has an ID) -->
<select name="AMC_metavalue_cosa_ha_uomo_primo_orario_custom" id="AMC_metavalue_cosa_ha_uomo_primo_orario_custom">
  <option value="" disabled selected>Imposta Cosa ha Uomo</option>
  <option value="Solo Ingresso" '.selected( $AMC_metakey_cosa_ha_uomo_primo_orario_custom, 'Solo Ingresso', false ) . '>Solo Ingresso</option>
  <option value="Ingresso + 1 Cocktail in omaggio" '.selected( $AMC_metakey_cosa_ha_uomo_primo_orario_custom, 'Ingresso + 1 Cocktail in omaggio', false ) . '>Ingresso + 1 Cocktail in omaggio</option>
  <option value="0" '.selected( $AMC_metakey_cosa_ha_uomo_primo_orario_custom, '0', false ) . '>Non Previsto</option>
</select>

Step 2: Add JavaScript Logic #

We'll write a reusable function to toggle the required attribute based on the first select's value. We'll also run it once on page load to handle cases where the select is already set to "Orario Custom" when the page loads (like editing an existing entry):

// Wait for the DOM to fully load before accessing elements
document.addEventListener('DOMContentLoaded', function() {
  // Grab references to all elements we need to control
  const firstSelect = document.getElementById('AMC_metavalue_tipologia_evento');
  const prezzoUomoInput = document.getElementById('prezzo-pista-uomo');
  const prezzoDonnaInput = document.getElementById('prezzo-pista-donna');
  const secondSelect = document.getElementById('AMC_metavalue_cosa_ha_uomo_primo_orario_custom');

  // Function to toggle required state for target fields
  function toggleRequiredFields() {
    const isCustomSelected = firstSelect.value === '8';
    prezzoUomoInput.required = isCustomSelected;
    prezzoDonnaInput.required = isCustomSelected;
    secondSelect.required = isCustomSelected;
  }

  // Set initial state when page loads
  toggleRequiredFields();

  // Update state whenever the first select changes
  firstSelect.addEventListener('change', toggleRequiredFields);
});

How It Works #

• DOMContentLoaded: Makes sure we don't try to interact with elements before they're rendered on the page.
• toggleRequiredFields: Checks if the first select's value is "8" (Orario Custom). If yes, it enables the required attribute for the target fields; otherwise, it disables it.
• Initial Run: Handles pre-selected cases (e.g., when editing an event that already uses custom timing) so the required state is correct right away.

This uses vanilla JavaScript, so no external dependencies are needed—it works seamlessly with your existing code.

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