如何为下拉菜单中的不同选项创建不同数量的输入文本字段？答案

【问题标题】：How to create different number of input text fields for different options in the drop down menu?如何为下拉菜单中的不同选项创建不同数量的输入文本字段？
【发布时间】：2013-12-12 17:11:25
【问题描述】：

这就是我想要达到的目标 -

从下拉菜单中选择不同的选项。
根据所选选项输入不同数量的文本字段。就像选择 optionA 时一样，它应该为某些输入自动创建 2 个文本字段。 OptionB 应该为输入创建 5 个文本字段。

这是我苦苦挣扎的地方-

无法获取所选选项的选项 ID 或值
创建可变数量的文本字段。

HTML 代码 -

<body>


          <p>
            <select name="Select Flow" id="Flow" >          
              <option id="option0" value="https://fusion.paypal.com">Send Money</option>
              <option id="option1" value="option1">optionA</option>
              <option id="option2" value="option2">OptionB</option>
              <option id="option3" value="option3">C</option>
              <option id="option4" value="option4">D</option>
              <option id="option5">E</option>
              <option id="option6">F</option>
              <option id="option7">G</option>
              <option id="option8" value="option8">H</option>           
            </select>
          </p>
          <p>
            <input type="submit" name="Submit" id="Submit" value="Submit" onclick="myfunc()"action="" />
          </p>
</body>

JS-

function myfunc()
{
var value="F";
var t = document.getElementById("Flow");
alert((t.options.length).innnerHTML);
for(var i=0; i<t.options.length;i++)
{
    if(t.options[i].text == value)
    {
        t.selectedIndex = i;
        alert(t.selectedIndex.innerHTML);
    }
}
}

【问题讨论】：

为什么 optionA 为某些输入创建 2 个文本字段。 OptionB 为输入创建 5 个文本字段。请解释一下
它的功能。我计划通过这个在后端触发一些 shell 脚本。这些输入将作为 shell 脚本的参数。
但是输入的数量也应该出现在您的选项中，尝试将其添加到您的值中，例如 value="option1_2" 并拆分此值以获得输入的数量
t.selectedIndex 是一个数字，你需要t[t.selectedIndex] 来引用选择的选项。
@Charafjra 还有其他方法吗？我不喜欢这种方法。

标签： javascript html

【解决方案1】：

这段代码可以帮助你

<!DOCTYPE html>
<html>
<body>
<script>
function myFunction(name,job)
{
alert(document.getElementById("Flow").value);
write = document.getElementById('textfeilds');
for(i=0;i<document.getElementById("Flow").value;i++)
{
 write.innerHTML += '<input type="text">';
}
}
</script>
  <p>
        <select name="Select Flow" id="Flow" >          
          <option id="option0" value="4">Send Money</option>
          <option id="option1" value="1">optionA</option>
          <option id="option2" value="2">OptionB</option>
          <option id="option3" value="3">C</option>
          <option id="option4" value="4">D</option>
          <option id="option5" value="5">E</option>
          <option id="option6" value="6">F</option>
          <option id="option7" value="7">G</option>
          <option id="option8" value="8">H</option>           
        </select>
      </p>
      <p>
        <input type="submit" name="Submit" id="Submit" value="Submit" onclick="myFunction()"action="" />
      </p>

<div id="textfeilds"></div>
</body>
</html>

【讨论】：