javascript 下拉选项和操作

dropdown option and action

提问by Ashwin

I have a drop down and inside that i have options. On clicking the option it must display fields respectively. Like for option1 == one text box option2 == two text box and so on...

我有一个下拉菜单，里面有选项。单击该选项时，它必须分别显示字段。就像 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>

on clicking option1 one field must be shown. on option2 two fields.. am new to javascript and html. Please help friends..

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

回答by Peter Rasmussen

If you can use jquery it can be done like below. On change select a data attribute containing the number of textboxes to display. Then for loop through them and append.

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

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:

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

回答by sasi

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

    }