Javascript 下拉选项和操作

我有一个下拉列表，里面有选项。单击该选项时，必须分别显示字段。 喜欢 选项1==一个文本框 option2==两个文本框，依此类推

<select id="dropdown">

    <option value="A">option1</option>
    <option value="B">option2</option>
    <option value="C">option3</option>
    <option value="D">option4</option>
</select>

选择1
选择2
选择3
选择4

单击选项1时，必须显示一个字段。在选项2上，有两个字段。。我不熟悉javascript和html。请帮助朋友。

<select id="dropdown" onChange="showHide()">

    <option value="A">option1</option>
    <option value="B">option2</option>
    <option value="C">option3</option>
    <option value="D">option4</option>
</select>


 function showHide()
 {
   hideAll();
  var val = document.getElementById("dropdown").value;

  if(val == "A")
   document.getElementById("firstTextBoxId").style.display = 'block';
  else if(val == "B")
   document.getElementById("secondTextBoxId").style.display = 'block';
  else if(val == "C")
   document.getElementById("ThirdTextBoxId").style.display = 'block';
  else if(val == "D")
   document.getElementById("FourthTextBoxId").style.display = 'block';

}


function hideAll()
   {
      document.getElementById("firstTextBoxId").style.display = 'none';
      document.getElementById("secondTextBoxId").style.display = 'none';
      document.getElementById("thirdTextBoxId").style.display = 'none';
      document.getElementById("fourthTextBoxId").style.display = 'none';

    }

选择1
选择2
选择3
选择4
函数showHide（）
{
希德尔（）；
var val=document.getElementById（“下拉菜单”）.value；
如果（val=“A”）
document.getElementById（“firstTextBoxId”）.style.display='block'；
否则，如果（val==“B”）
document.getElementById（“secondTextBoxId”）.style.display='block'；
否则，如果（val==“C”）
document.getElementById（“ThirdTextBoxId”）.style.display='block'；
否则，如果（val=“D”）
document.getElementById（“FourthTextBoxId”）.style.display='block'；
}
函数hideAll（）
{
document.getElementById（“firstTextBoxId”）.style.display='none'；
document.getElementById（“secondTextBoxId”）.style.display='none'；
document.getElementById（“thirdTextBoxId”）.style.display='none'；
document.getElementById（“fourthTextBoxId”）.style.display='none'；
}

如果您可以使用jquery，可以像下面这样完成。更改时，选择包含要显示的文本框数量的数据属性。然后for循环遍历它们并追加

Html:

<select id="dropdown">
    <option value="A" data-number="1">option1</option>
    <option value="B" data-number="2">option2</option>
    <option value="C" data-number="3">option3</option>
    <option value="D" data-number="4">option4</option>
</select>
<div id="textBoxContainer">

</div>

$('#dropdown').change(function(){
    $('#textBoxContainer').empty();
    var number = $(this).find('option:selected').attr('data-number');
    for (var i = 0; i < number; i++){
          $('#textBoxContainer').append('<input type="text"/>');
    }
});

选择1
选择2
选择3
选择4

Javascript:

<select id="dropdown">
    <option value="A" data-number="1">option1</option>
    <option value="B" data-number="2">option2</option>
    <option value="C" data-number="3">option3</option>
    <option value="D" data-number="4">option4</option>
</select>
<div id="textBoxContainer">

</div>

$('#dropdown').change(function(){
    $('#textBoxContainer').empty();
    var number = $(this).find('option:selected').attr('data-number');
    for (var i = 0; i < number; i++){
          $('#textBoxContainer').append('<input type="text"/>');
    }
});

$（'#下拉列表'）。更改（函数（）{
$（'#textBoxContainer'）.empty（）；
var number=$（this）.find（'option:selected'）.attr（'data-number'）；
对于（变量i=0；i

您想显示/隐藏文本字段还是动态插入它们？Xeano:我想显示和隐藏字段，就像下面的操作一样，但与javascript中的操作相同..？您好。谢谢。。这起作用了。。我想要javascript版本的？？我该怎么做？