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

How to create different number of input text fields for different options in the drop down menu?

本文关键字：输入 文本 字段 创建 选项 下拉菜单      更新时间：2023-09-26

这就是我想要实现的目标-

  • 从下拉菜单中选择不同的选项
  • 根据所选选项，输入不同数量的文本字段。就像选择选项A时一样，它应该自动为一些输入创建2个文本字段。选项B应为输入创建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);
    }
}
}

此代码可以帮助您

<!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>
相关文章：