如何重置HTML Select至初始状态？附相关代码场景

Great question! To fix this, we just need to save the original value of the select element upfront, then reset it if the user cancels the confirmation prompt. Here's a straightforward, working solution with step-by-step details:

Step 1: Save the Initial Value #

First, we need to store the select's starting selected value so we can revert back to it later. You can do this two ways:

Option 1: Add a Data Attribute to HTML (Quick & Simple) #

Modify your select tag to include an attribute that holds the original value:

<select class="task" id="c1740778" name="c1740778" data-default-value="NotStarted" data-original-value="NotStarted">
  <option value="NotStarted" selected="selected">NotStarted</option>
  <option value="Complete">Complete</option>
</select>

Option 2: Capture Initial Value with JavaScript #

If you don't want to edit the HTML, grab the initial value when the page loads:

const selectElement = document.getElementById('c1740778');
let originalValue = selectElement.value;

Step 2: Update the Change Event Handler #

Now adjust your JavaScript to check the confirmation prompt and revert the select if the user clicks "Cancel". Here's the full working code:

// Get the select element
const selectElement = document.getElementById('c1740778');

// Save original value (use this line if you didn't add the data attribute to HTML)
let originalValue = selectElement.value;

// Add change event listener
selectElement.addEventListener('change', function() {
  const newValue = this.value;
  
  if (confirm('Are you sure you want to save ?')) {
    console.log("complete changed");
    // Update the original value to the new confirmed selection
    originalValue = newValue;
  } else {
    console.log("Reset");
    // Revert the select back to its original/last confirmed value
    this.value = originalValue;
  }
});

How This Works #

• When the page loads, we store the initial selected value (NotStarted) so we have something to revert to.
• When the user changes the select, we first capture the new value they picked.
• If they confirm the prompt, we update our stored original value to the new selection (so if they change it again later, the "original" becomes this confirmed value).
• If they cancel, we set the select's value back to our stored original value, instantly reverting it to the last valid state.

Bonus: Using the Data Attribute Approach #

If you went with the HTML data attribute option, here's how to adjust the JS to use that instead of a variable:

const selectElement = document.getElementById('c1740778');

selectElement.addEventListener('change', function() {
  const newValue = this.value;
  const originalValue = this.dataset.originalValue;
  
  if (confirm('Are you sure you want to save ?')) {
    console.log("complete changed");
    // Update the data attribute to the new confirmed value
    this.dataset.originalValue = newValue;
  } else {
    console.log("Reset");
    this.value = originalValue;
  }
});

This keeps the state tied directly to the element itself, which can be helpful if your script re-runs or you have multiple similar selects on the page.

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