Question

我有一个下拉内部，我有选择权。单击该选项时，它必须分别显示字段。像 option1 ==一个文本框 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>

单击option1时必须显示一个字段。在option2两个字段..我是javascript和html的新手。请帮朋友..

Answer 1

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

Demo

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

<强>使用Javascript：

$('#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"/>');
    }
});

Answer 2

<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';

    }

下拉选项和操作

2 个答案: