问题

以下是您提供的内容的翻译：

问题是初始时应显示2个输入文本字段，根据下拉选择添加或删除输入字段，下拉菜单从2开始，到6结束。

我的代码：

function addElements(selectElement) {
  var textboxNumbers = selectElement.value;
  var dsets = document.getElementById("dsets");
  var dmenu = document.getElementById("textboxes");

  dsets.innerHTML = ""; //清空"dsets"元素

  for (var i = 0; i < textboxNumbers; i++) {
    var yourTextboxes = document.createElement("INPUT");
    yourTextboxes.setAttribute("type", "textbox" + "<br>");
    yourTextboxes.setAttribute("id", "dsid" + (i + 1));
    yourTextboxes.setAttribute("placeholder", "DataSet Name " + (i + 1));
    yourTextboxes.setAttribute("style", "height: 25px; width: 250px;");
    dsets.appendChild(yourTextboxes);
  }
  document.getElementById("textboxes").style.display = '';
}

<td><select class="displaymenu" onclick="addElements(this)" id="textboxes">
  <option>Please Select</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select></td>
</tr>
</table>

预期结果：

任何帮助将不胜感激...

function addElements(selectElement) {
  var textboxNumbers = selectElement.value;
  var dsets = document.getElementById("dsets");
  var dmenu = document.getElementById("textboxes");

  dsets.innerHTML = ""; //Empty "dsets" element

  for (var i = 0; i < textboxNumbers; i++) {
    var yourTextboxes = document.createElement("INPUT");
    yourTextboxes.setAttribute("type", "textbox"+"<br>");
    yourTextboxes.setAttribute("id", "dsid"+(i+1));
    yourTextboxes.setAttribute("placeholder", "DataSet Name "+(i+1));
	yourTextboxes.setAttribute("style", "height: 25px; width: 250px;");
	dsets.appendChild(yourTextboxes);
  }
  document.getElementById("textboxes").style.display = '';
}

<td><select class="displaymenu" onclick="addElements(this)" id="textboxes">
  <option>Please Select</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select></td>
</tr>
</table>

答案1

得分: 1

以下是翻译好的内容：

您可能没有添加 <div id="dsets"></div> 以容纳要附加的输出。

还要为选择框使用 onchange 事件。我已经更改了它。

在选择框中添加 selected，它将选择默认选项，并在默认状态下触发选定的选项更改事件。

请尝试以下代码

<!-- 开始片段: js 隐藏: false 控制台: true babel: false -->

<!-- 语言: lang-js -->

function addElements(selectElement) {
    var textboxNumbers = selectElement.value;
    var dsets = document.getElementById("dsets");
    var dmenu = document.getElementById("textboxes");

    dsets.innerHTML = ""; // 清空 "dsets" 元素

    for (var i = 0; i < textboxNumbers; i++) {
        var yourTextboxes = document.createElement("INPUT");
        var linebreak = document.createElement("br");

        yourTextboxes.setAttribute("type", "textbox" + "<br>");
        yourTextboxes.setAttribute("id", "dsid" + (i + 1));
        yourTextboxes.setAttribute("placeholder", "DataSet Name " + (i + 1));
        yourTextboxes.setAttribute("style", "height: 25px; width: 250px;");
        dsets.appendChild(yourTextboxes);
        dsets.appendChild(linebreak);
    }
    document.getElementById("textboxes").style.display = '';
}

var event = new Event('change');
var element = document.querySelector(".displaymenu");
element.dispatchEvent(event);

<!-- 语言: lang-html -->

<table>
    <td><select class="displaymenu" onchange="addElements(this)" id="textboxes">
            <option>Please Select</option>
            <option selected>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select></td>
</table>
<div id="dsets"></div>

<!-- 结束片段 -->

希望这会有所帮助。

<details>
<summary>英文:</summary>

You may not added `&lt;div id=&quot;dsets&quot;&gt;&lt;/div&gt;` to hold the output to append.

Also use `onchange` event for **select boxes**. I have changed it. 

Add `selected` to the select box, it will select the default option and trigged the selected options change event in default state.

### Try below Code 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    function addElements(selectElement) {
        var textboxNumbers = selectElement.value;
        var dsets = document.getElementById(&quot;dsets&quot;);
        var dmenu = document.getElementById(&quot;textboxes&quot;);

        dsets.innerHTML = &quot;&quot;; //Empty &quot;dsets&quot; element

        for (var i = 0; i &lt; textboxNumbers; i++) {
            var yourTextboxes = document.createElement(&quot;INPUT&quot;);
            var linebreak = document.createElement(&quot;br&quot;);

            yourTextboxes.setAttribute(&quot;type&quot;, &quot;textbox&quot; + &quot;&lt;br&gt;&quot;);
            yourTextboxes.setAttribute(&quot;id&quot;, &quot;dsid&quot; + (i + 1));
            yourTextboxes.setAttribute(&quot;placeholder&quot;, &quot;DataSet Name &quot; + (i + 1));
            yourTextboxes.setAttribute(&quot;style&quot;, &quot;height: 25px; width: 250px;&quot;);
            dsets.appendChild(yourTextboxes);
            dsets.appendChild(linebreak);
        }
        document.getElementById(&quot;textboxes&quot;).style.display = &#39;&#39;;
    }

    var event = new Event(&#39;change&#39;);
    var element = document.querySelector(&quot;.displaymenu&quot;);
    element.dispatchEvent(event);

&lt;!-- language: lang-html --&gt;

    &lt;table&gt;
        &lt;td&gt;&lt;select class=&quot;displaymenu&quot; onchange=&quot;addElements(this)&quot; id=&quot;textboxes&quot;&gt;
                &lt;option&gt;Please Select&lt;/option&gt;
                &lt;option selected&gt;2&lt;/option&gt;
                &lt;option&gt;3&lt;/option&gt;
                &lt;option&gt;4&lt;/option&gt;
                &lt;option&gt;5&lt;/option&gt;
                &lt;option&gt;6&lt;/option&gt;
            &lt;/select&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;div id=&quot;dsets&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

Hope this will helps.



</details>