动态下拉选项将显示不同的多个自由文本框

本文介绍了动态下拉选项将显示不同的多个自由文本框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

//这里的场景，我在一个下拉列表中有两个选项，如果我选择其中一个选项将填充多个文本框。

//here the scenario, I''ve two option in one dropdown, if I select either one the option will populate multiple textbox.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>dynamic dropdown populate multiple text box</title>
</head>

<body>

<p align="center">//if choose for option1 and will populate free text box<br>
&nbsp;</p>


<form method="POST" action="###">
<table width="362" border="0" align="center">
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">Option</font></strong></td>
      <td width="199"><div align="left">
      <select name="plat" placeholder="please select">
        <option></option>
        <option id="option1">option1</option>
        <option id="option2">option2</option>
      </select>
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">sub type1</font></strong></td>
      <td>
      <div align="left">
      <input name="subtype1" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td align="center" bgcolor="#31AFDA"><strong><font color="#FFFFFF">sub
        type2</font></strong></td>
      <td><div align="left"><input name="subtype2" type="text" size="33" /></div></td>
    </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">sub type3</font></strong></td>
      <td>
      <div align="left">
      <input name="subtype3" type="text" size="33" />
      </div>
      </td>
      </tr>
    </table>




    <p align="center"><input type="submit" value="Submit" name="B1"></p>
</form>



<p align="center">&nbsp;</p>
<p align="center">//if choose for option2 and will populate free text box as
below<br>
&nbsp;</p>
<form method="POST" action="###">
<table width="362" border="0" align="center">
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">Option</font></strong></td>
      <td width="199"><div align="left">
      <select name="option" >
        <option></option>
        <option id="option3">option1</option>
        <option id="option4">option2</option>
      </select>
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">sub type1</font></strong></td>
      <td>
      <div align="left">
      <input name="subtype1" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td align="center" bgcolor="#31AFDA"><strong><font color="#FFFFFF">sub
        type2</font></strong></td>
      <td><div align="left">
        <input name="subtype2" type="text" size="33" /></div></td>
    </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA"><strong>
        <font color="#FFFFFF">sub type3</font></strong></td>
      <td>
      <div align="left">
      <input name="subtype3" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">sub type4</td>
      <td>
      <input name="subtype4" type="text" size="33" /></td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">sub type5</td>
      <td>
      <input name="subtype5" type="text" size="33" /></td>
      </tr>
    </table>



<p align="center"><input type="submit" value="Submit" name="B1"></p>
</form>



</body>

</html>

推荐答案

<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>dynamic dropdown populate multiple text box</title>
</head>
 
<body>
<script>
function Process()
{
	var x = document.getElementById(''option'').selectedIndex;
	var y = document.getElementById(''option'').value;

	switch(x)
	{
		case 0:
			break;
		case 1:
			document.getElementById(''subtype4'').style.visibility="hidden";
			document.getElementById(''subtype5'').style.visibility="hidden";
			break;
		case 2:
			document.getElementById(''subtype4'').style.visibility="visible";
			document.getElementById(''subtype5'').style.visibility="visible";
			break;
	}
}
</script>

<form method="POST" action="###">
<table width="362" border="0" align="center">
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">
        <font color="#FFFFFF">Option</font></td>
      <td width="199"><div align="left">
      <select name="option" id="option">
        <option></option>
        <option id="option1">option1</option>
        <option id="option2">option2</option>
      </select>
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">
        <font color="#FFFFFF">sub type1</font></td>
      <td>
      <div align="left">
      <input id="subtype1" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td align="center" bgcolor="#31AFDA"><font color="#FFFFFF">sub
        type2</font></td>
      <td><div align="left">
        <input id="subtype2" type="text" size="33" /></div></td>
    </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">
        <font color="#FFFFFF">sub type3</font></td>
      <td>
      <div align="left">
      <input id="subtype3" type="text" size="33" />
      </div>
      </td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">sub type4</td>
      <td>
      <input id="subtype4" type="text" size="33" /></td>
      </tr>
    <tr>
      <td width="153" align="center" bgcolor="#31AFDA">sub type5</td>
      <td>
      <input id="subtype5" type="text" size="33" /></td>
      </tr>
    </table>
 

 
<p align="center"><input type="button" value="Submit" name="B1"  önClick="Process()"></p>
</form>
 

 
</body>
 
</html>

这篇关于动态下拉选项将显示不同的多个自由文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！