如何用JavaScript实现输入数字后匹配表单下拉框对应书面数字选项？

Hey there! Let's get your functionality working properly. Right now your code has a couple of issues that prevent it from selecting the correct dropdown option—let's break it down and fix it step by step.

What's Wrong with the Original Code? #

• You're setting options[i].selected = input.value directly, but selected expects a boolean (true/false) not a string/number from the input.
• There's no mapping between the input number and the written number text in your dropdown options. The code doesn't know that 1 corresponds to "one", 2 to "two", etc.

Corrected Code #

First, let's update your HTML to include full example options:

<input type="number" id="myInput" placeholder="Enter a number">
<button id="myBtn">Match Written Number</button>
<select id="mySelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
  <option>five</option>
</select>

Then fix the JavaScript logic:

const btn = document.getElementById("myBtn");
btn.addEventListener("click", funct);

function funct() {
  const input = document.getElementById("myInput");
  const select = document.getElementById("mySelect");
  const options = select.options;
  
  // Create a mapping of numbers to their written forms
  const numberMap = {
    1: "one",
    2: "two",
    3: "three",
    4: "four",
    5: "five"
    // Add more number-text pairs as needed
  };
  
  // Convert input value to integer to avoid string mismatches
  const inputNum = parseInt(input.value, 10);
  
  // Check if the input exists in our mapping
  if (numberMap[inputNum]) {
    // Loop through options to find the matching one
    for (let i = 0; i < options.length; i++) {
      // Set selected to true only if option text matches the mapped value
      options[i].selected = options[i].text === numberMap[inputNum];
    }
  } else {
    // Handle invalid input: deselect all options and alert user
    select.selectedIndex = -1;
    alert("Please enter a number between 1 and 5!");
  }
}

Key Improvements Explained: #

• Number Mapping: The numberMap object explicitly links digits to their written counterparts—super easy to expand with more numbers later.
• Type Conversion: parseInt(input.value, 10) ensures we're working with an integer instead of a string, avoiding silly mismatches like "1" vs 1.
• Correct Selection Logic: Instead of assigning the input value directly to selected, we compare each option's text to the mapped written number, setting selected to true only when there's a match.
• Error Handling: We added a check for invalid inputs, deselecting all options and showing an alert if the user enters a number outside our mapped range.

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