如何从下拉列表中删除指定项而非批量删除后续项？

Alright, let's tweak your code so the Undo button removes the selected history entry instead of just the last one. Here's the adjusted full code, plus a breakdown of the key changes:

<label> History: <select id="historySelect"> </select> </label>
<label> <input type="button" id="cmbDelete" value="Undo"> </label>

<script>
var history = [];
var historySelect = document.getElementById('historySelect');
// Assuming these elements are defined in your actual project
var canvas = document.getElementById('canvas'); 
var canvasTmp = document.getElementById('canvasTmp'); 
var context = canvas.getContext('2d');
var contextTmp = canvasTmp.getContext('2d');

historySelect.addEventListener('change', ()=>{
  restoreHistoryAction(historySelect.value)
})

function drawCanvas() {
  contextTmp.drawImage(canvas, 0, 0);
  history.push(contextTmp.getImageData(0,0,canvasTmp.width,canvasTmp.height))
  updateHistorySelection()
  context.clearRect(0, 0, canvas.width, canvas.height);
}

function cmbDeleteClick(){
  const selectedIdx = historySelect.selectedIndex;
  // Prevent deleting the initial "Start" state (index 0)
  if(history.length <= 1 || selectedIdx === 0) return;
  
  // Remove only the selected entry from history
  history.splice(selectedIdx, 1);
  
  // Refresh the dropdown and set selection to the latest remaining entry
  updateHistorySelection();
  // Restore the newest valid state to the canvas
  restoreHistoryAction(history.length - 1);
}

function updateHistorySelection(){
  historySelect.innerHTML = '';
  history.forEach((entry,index)=>{
    let option = document.createElement('option');
    option.value = index;
    option.textContent = index===0 ? 'Start ' : 'Action '+index;
    historySelect.appendChild(option);
  })
  historySelect.selectedIndex = history.length-1;
}

function restoreHistoryAction(index){
  contextTmp.putImageData(history[index],0,0);
  // Optional: Sync temp canvas to visible main canvas
  context.drawImage(canvasTmp, 0, 0);
}

var cmbDelete = document.getElementById("cmbDelete");
cmbDelete.addEventListener("click",cmbDeleteClick, false);
</script>

Key Changes Explained: #

1. Revised cmbDeleteClick Function:

   • Grabs the exact selected index from the dropdown with historySelect.selectedIndex
   • Blocks deletion of the initial "Start" entry to keep a base state you can't undo past
   • Uses history.splice(selectedIdx, 1) to precisely remove only the chosen entry (replacing pop() which only targeted the last item)
   • After deletion, refreshes the dropdown and loads the latest remaining history state to keep the canvas in sync

2. Small Quality-of-Life Tweaks:

   • Added explicit declarations for canvas/context elements (assuming you had these defined elsewhere, this makes the code self-contained)
   • Added an optional line in restoreHistoryAction to copy the temp canvas state to the visible main canvas, ensuring your displayed content matches the restored history

Now when you select any entry (except "Start") and click Undo, only that specific action will be removed from your history, and the canvas will update to the latest valid state automatically.

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