如何用JavaScript根据输入数字生成对应数量的<option>标签代码？

Hey there! Let's tweak your code so that when you input a number N, the page shows N lines of the <option> tag's raw HTML code instead of generating <select> elements. Here's how to do it:

Updated HTML Code #

First, let's fix the input type to use the standard number type (your original num isn't a valid HTML input type, which might cause unexpected behavior):

<body>
  <form action="index.html" method="post">
    <input type="number" onkeyup="addOptions()" name="member" id="member" min="0">
    <div id="selects"></div>
  </form>
</body>

Updated JavaScript Code #

Now, instead of creating DOM elements, we'll generate and display the raw HTML code strings. We'll escape the angle brackets so the browser shows the code instead of rendering it as an element:

<script type="text/javascript">
function addOptions() {
  const container = document.getElementById('selects');
  // Clear previous content first
  container.innerHTML = "";
  
  // Parse input value to integer, default to 0 if input is invalid
  const inputValue = parseInt(document.getElementById('member').value) || 0;
  
  for (let i = 0; i < inputValue; i++) {
    // Create the escaped <option> code string
    const optionCode = '&lt;option value="example" id="example"&gt;example&lt;/option&gt;';
    // Wrap each code line in <pre> for better code formatting
    container.innerHTML += `<pre>${optionCode}</pre>`;
  }
}
</script>

Key Changes Explained #

• Input Type Fix: Changed type="num" to type="number" and added min="0" to restrict input to non-negative numbers, making the input behavior more predictable.
• Display Raw Code: Instead of creating <select> DOM elements, we build a string with escaped angle brackets (< and >). This tells the browser to display the code as text instead of rendering it as an HTML element.
• Clean Input Handling: Used parseInt(...) || 0 to handle cases where the input is empty or non-numeric, preventing errors from invalid values.
• Better Formatting: Wrapped each code line in a <pre> tag to preserve whitespace and use a monospaced font, making the code easier to read.

Optional: Unique IDs/Values #

If you want each <option> to have a unique id and value (like example-1, example-2), you can adjust the code string in the loop:

const optionCode = `<option value="example-${i+1}" id="example-${i+1}">example-${i+1}</option>`;

This will generate distinct attributes for each line, which might be useful if you plan to use these codes later.

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