基于下拉选择值填充输入文本字段，初始时应有2个输入字段。

huangapple
go评论94阅读模式
英文:

Based on dropdown select value populate input text fields and initially it should have 2 input fields

问题

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

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

我的代码：

  1. function addElements(selectElement) {
  2.   var textboxNumbers = selectElement.value;
  3.   var dsets = document.getElementById("dsets");
  4.   var dmenu = document.getElementById("textboxes");
  6.   dsets.innerHTML = ""; //清空"dsets"元素
  8.   for (var i = 0; i < textboxNumbers; i++) {
  9.     var yourTextboxes = document.createElement("INPUT");
  10.     yourTextboxes.setAttribute("type", "textbox" + "<br>");
  11.     yourTextboxes.setAttribute("id", "dsid" + (i + 1));
  12.     yourTextboxes.setAttribute("placeholder", "DataSet Name " + (i + 1));
  13.     yourTextboxes.setAttribute("style", "height: 25px; width: 250px;");
  14.     dsets.appendChild(yourTextboxes);
  15.   }
  16.   document.getElementById("textboxes").style.display = '';
  17. }
  1. <td><select class="displaymenu" onclick="addElements(this)" id="textboxes">
  2.   <option>Please Select</option>
  3.   <option>2</option>
  4.   <option>3</option>
  5.   <option>4</option>
  6.   <option>5</option>
  7.   <option>6</option>
  8. </select></td>
  9. </tr>
  10. </table>

预期结果：

基于下拉选择值填充输入文本字段，初始时应有2个输入字段。

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

英文:

Problem is initially it should show 2 input text fields and based on drop down select it should add or remove input fields.
and dropdown menu start with 2 till 6.

My Code:

  1. function addElements(selectElement) {
  2.   var textboxNumbers = selectElement.value;
  3.   var dsets = document.getElementById(&quot;dsets&quot;);
  4.   var dmenu = document.getElementById(&quot;textboxes&quot;);
  6.   dsets.innerHTML = &quot;&quot;; //Empty &quot;dsets&quot; element
  8.   for (var i = 0; i &lt; textboxNumbers; i++) {
  9.     var yourTextboxes = document.createElement(&quot;INPUT&quot;);
  10.     yourTextboxes.setAttribute(&quot;type&quot;, &quot;textbox&quot;+&quot;&lt;br&gt;&quot;);
  11.     yourTextboxes.setAttribute(&quot;id&quot;, &quot;dsid&quot;+(i+1));
  12.     yourTextboxes.setAttribute(&quot;placeholder&quot;, &quot;DataSet Name &quot;+(i+1));
  13. 	yourTextboxes.setAttribute(&quot;style&quot;, &quot;height: 25px; width: 250px;&quot;);
  14. 	dsets.appendChild(yourTextboxes);
  15.   }
  16.   document.getElementById(&quot;textboxes&quot;).style.display = &#39;&#39;;
  17. }
  1. &lt;td&gt;&lt;select class=&quot;displaymenu&quot; onclick=&quot;addElements(this)&quot; id=&quot;textboxes&quot;&gt;
  2.   &lt;option&gt;Please Select&lt;/option&gt;
  3.   &lt;option&gt;2&lt;/option&gt;
  4.   &lt;option&gt;3&lt;/option&gt;
  5.   &lt;option&gt;4&lt;/option&gt;
  6.   &lt;option&gt;5&lt;/option&gt;
  7.   &lt;option&gt;6&lt;/option&gt;
  8. &lt;/select&gt;&lt;/td&gt;
  9. &lt;/tr&gt;
  10. &lt;/table&gt;

Expected:

基于下拉选择值填充输入文本字段，初始时应有2个输入字段。

Any Help will be much appreciated...

答案1

得分: 1

以下是翻译好的内容：

您可能没有添加 &lt;div id=&quot;dsets&quot;&gt;&lt;/div&gt; 以容纳要附加的输出。

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

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

请尝试以下代码

  1. <!-- 开始片段: js 隐藏: false 控制台: true babel: false -->
  3. <!-- 语言: lang-js -->
  5. function addElements(selectElement) {
  6.     var textboxNumbers = selectElement.value;
  7.     var dsets = document.getElementById("dsets");
  8.     var dmenu = document.getElementById("textboxes");
  10.     dsets.innerHTML = ""; // 清空 "dsets" 元素
  12.     for (var i = 0; i < textboxNumbers; i++) {
  13.         var yourTextboxes = document.createElement("INPUT");
  14.         var linebreak = document.createElement("br");
  16.         yourTextboxes.setAttribute("type", "textbox" + "<br>");
  17.         yourTextboxes.setAttribute("id", "dsid" + (i + 1));
  18.         yourTextboxes.setAttribute("placeholder", "DataSet Name " + (i + 1));
  19.         yourTextboxes.setAttribute("style", "height: 25px; width: 250px;");
  20.         dsets.appendChild(yourTextboxes);
  21.         dsets.appendChild(linebreak);
  22.     }
  23.     document.getElementById("textboxes").style.display = '';
  24. }
  26. var event = new Event('change');
  27. var element = document.querySelector(".displaymenu");
  28. element.dispatchEvent(event);
  30. <!-- 语言: lang-html -->
  32. <table>
  33.     <td><select class="displaymenu" onchange="addElements(this)" id="textboxes">
  34.             <option>Please Select</option>
  35.             <option selected>2</option>
  36.             <option>3</option>
  37.             <option>4</option>
  38.             <option>5</option>
  39.             <option>6</option>
  40.         </select></td>
  41. </table>
  42. <div id="dsets"></div>
  44. <!-- 结束片段 -->
  46. 希望这会有所帮助。
  48. <details>
  49. <summary>英文:</summary>
  51. You may not added `&lt;div id=&quot;dsets&quot;&gt;&lt;/div&gt;` to hold the output to append.
  53. Also use `onchange` event for **select boxes**. I have changed it. 
  55. Add `selected` to the select box, it will select the default option and trigged the selected options change event in default state.
  57. ### Try below Code 
  59. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  61. &lt;!-- language: lang-js --&gt;
  63.     function addElements(selectElement) {
  64.         var textboxNumbers = selectElement.value;
  65.         var dsets = document.getElementById(&quot;dsets&quot;);
  66.         var dmenu = document.getElementById(&quot;textboxes&quot;);
  68.         dsets.innerHTML = &quot;&quot;; //Empty &quot;dsets&quot; element
  70.         for (var i = 0; i &lt; textboxNumbers; i++) {
  71.             var yourTextboxes = document.createElement(&quot;INPUT&quot;);
  72.             var linebreak = document.createElement(&quot;br&quot;);
  74.             yourTextboxes.setAttribute(&quot;type&quot;, &quot;textbox&quot; + &quot;&lt;br&gt;&quot;);
  75.             yourTextboxes.setAttribute(&quot;id&quot;, &quot;dsid&quot; + (i + 1));
  76.             yourTextboxes.setAttribute(&quot;placeholder&quot;, &quot;DataSet Name &quot; + (i + 1));
  77.             yourTextboxes.setAttribute(&quot;style&quot;, &quot;height: 25px; width: 250px;&quot;);
  78.             dsets.appendChild(yourTextboxes);
  79.             dsets.appendChild(linebreak);
  80.         }
  81.         document.getElementById(&quot;textboxes&quot;).style.display = &#39;&#39;;
  82.     }
  84.     var event = new Event(&#39;change&#39;);
  85.     var element = document.querySelector(&quot;.displaymenu&quot;);
  86.     element.dispatchEvent(event);
  88. &lt;!-- language: lang-html --&gt;
  90.     &lt;table&gt;
  91.         &lt;td&gt;&lt;select class=&quot;displaymenu&quot; onchange=&quot;addElements(this)&quot; id=&quot;textboxes&quot;&gt;
  92.                 &lt;option&gt;Please Select&lt;/option&gt;
  93.                 &lt;option selected&gt;2&lt;/option&gt;
  94.                 &lt;option&gt;3&lt;/option&gt;
  95.                 &lt;option&gt;4&lt;/option&gt;
  96.                 &lt;option&gt;5&lt;/option&gt;
  97.                 &lt;option&gt;6&lt;/option&gt;
  98.             &lt;/select&gt;&lt;/td&gt;
  99.         &lt;/tr&gt;
  100.     &lt;/table&gt;
  101.     &lt;div id=&quot;dsets&quot;&gt;&lt;/div&gt;
  103. &lt;!-- end snippet --&gt;
  105. Hope this will helps.
  109. </details>

huangapple
  • 本文由 发表于 2023年5月15日 14:25:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76251372.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定