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

时间:2013-12-12 17:11:25

标签: javascript html

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

  • 从下拉菜单中选择不同的选项。
  • 根据所选的选项输入不同数量的文本字段。 就像选择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);
    }
}
}

1 个答案:

答案 0 :(得分:0)

此代码可以帮助您

<!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>