有1个下拉框，用不同的选定选项填充多个文本框 [英] Have 1 drop down box populate multiple text boxes with different selected options

问题描述

我有一个列表/菜单，当选择特定项目时，我需要填充文本框1，然后将列表/菜单设置回选择。然后，从该原始列表/菜单中，用户需要选择另一个选项并填充文本框2，依此类推。有人可以通过javascript告诉我如何做到这一点吗？



以下是HTML的代码：

 <  选择    name   =  ddl11    id   =  ddl11     onChange   = < span class =code-keyword> PopTextbox（） >  
 <  选项    value   = 选择   已选择 > 选择< ;   / option  >  
 <  选项    value   = 选项1 > 选项1 <   / option  >  
 <  选项   < span class =code-attribute> value   = 选项2 > 选项2 <   / option  >  
 <  选项    value   = 选项3 > 选项3 <   / option  >  
 <  选项    value   = 选项4 > 选项4 <   / option  >  
 <   op     value   = 选项5 > 选项5 <   / option  >  
 <  选项    value   = 选项6 > 选项6 <   / option  >  
 <  选项   值  =  Op 7 > 选项7 <   / option  >  
 <  选项    value   = 选项8 > 选项8 <   / option  >  
  <  选项    value   = 选项9 > 选项9 <   / option  >  
 <  选项 < span class =code-attribute>   value   = 选项10 > 选项10 <   / option  >  
 <   / select  >  
 <  < span class =code-leadattribute> / p  >  
 <  表    width   =  100％    border   =  1    cellpadding   =  0    cellspacing   =  0    bordercolor   = ＃000000 >  
 <   tr  >  
 <   td     width   =  75％    align   =  center    bgcolor   =  ＃BFD0EB >  <   strong  > 名称<   / strong  >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     align   =  center >  <   label    < span class =code-attribute> for   =  textfield1 >  <   / label  >  
 <  输入   名称  =  textfield1    type   =  text    id   =  textfield1    size   =  80 >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     align   = <温泉n class =code-keyword> center >  <  输入   名称  =  textfield2    type   =  text    id   =  textfield2    size   =  80 >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     align   =  center >  <  输入   名称  =  textfield3    type   =  text    id   =  textfield3    size   =   80 >  <   / td  >  
 <   / tr  >  
  <   tr  >  
 <   td     align   =  center >  < span class =code-keyword><   input     name   =  textfield4   类型  =  text    id   =  textfield4    size   =  80 >  <   / td  >  
 <   / tr  >  
 < span class =code-keyword><   tr  >  
<   td     align   =  center >  <  输入   名称  =  textfield5    type   =  text    id   =  textfield5    size   =  80 >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     align   =  center >  <   input     name   =  textfield6    type   =  text    id   =  textfield6    size   =  80 >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     align   =  center >  <  < span class =code-leadattribute> input     name   =  textfield7    type   =  text    id   =  textfield7    size   =  80 >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     align   =  center >   <  输入   名称  =  textfield8    type   =  text    id   =  textfield8    size   =  80 >  <   / td  >  
  <   / tr  >  
 <   tr  >  
 <   td     align   =  center >  <  输入   名称  =  textfield9 < span class =code-attribute>   type   =  text    id   =   textfield9    size   =  80 >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     align   =  center >  <   input    名称  =  textfield10    type   =  text    id   =  textfield10    size   =  80 >  <   / td  >  
 <   / tr  >  
 <   / table  >  

解决方案

您无法更改 SelectedIndex 在内更改事件。所以，你无法重置。你为什么需要那个？这不是通常的行为。用户会感到困惑。

演示

有关您的其他要求，请参阅演示 - [演示]在DropDownList上填充相关的TextBox更改 [ ^ ]。

I have a list/menu that when a specific item is chosen, I need that to populate textbox 1, and then set the list/menu back to Select. Then from that original list/menu, the user needs to choose another option and have that populate textbox 2 and so on. Can someone show me how to do this via javascript?

Here is the code for the HTML:

<select name="ddl11" id="ddl11" onChange="PopTextbox()">
       <option value="Select" selected>Select</option>
       <option value="Option 1">Option 1</option>
       <option value="Option 2">Option 2</option>
       <option value="Option 3">Option 3</option>
       <option value="Option 4">Option 4</option>
       <option value="Option 5">Option 5</option>
       <option value="Option 6">Option 6</option>
       <option value="Option 7">Option 7</option>
       <option value="Option 8">Option 8</option>
       <option value="Option 9">Option 9</option>
       <option value="Option 10">Option 10</option>
     </select>
   </p>
   <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
     <tr>
       <td width="75%" align="center" bgcolor="#BFD0EB"><strong>Name</strong></td>
     </tr>
     <tr>
       <td align="center"><label for="textfield1"></label>
       <input name="textfield1" type="text" id="textfield1" size="80"></td>
     </tr>
     <tr>
       <td align="center"><input name="textfield2" type="text" id="textfield2" size="80"></td>
     </tr>
     <tr>
       <td align="center"><input name="textfield3" type="text" id="textfield3" size="80"></td>
     </tr>
     <tr>
       <td align="center"><input name="textfield4" type="text" id="textfield4" size="80"></td>
     </tr>
     <tr>
       <td align="center"><input name="textfield5" type="text" id="textfield5" size="80"></td>
     </tr>
     <tr>
       <td align="center"><input name="textfield6" type="text" id="textfield6" size="80"></td>
     </tr>
     <tr>
       <td align="center"><input name="textfield7" type="text" id="textfield7" size="80"></td>
     </tr>
     <tr>
       <td align="center"><input name="textfield8" type="text" id="textfield8" size="80"></td>
     </tr>
     <tr>
       <td align="center"><input name="textfield9" type="text" id="textfield9" size="80"></td>
     </tr>
     <tr>
       <td align="center"><input name="textfield10" type="text" id="textfield10" size="80"></td>
     </tr>
   </table>

解决方案

You can't able to change the SelectedIndex inside change Event. So, you can't reset. Why would you need that? That is not a usual behaviour. User will get confused.

Demo

For your other requirements, see the demo - [Demo] Populate related TextBox on DropDownList Change[^].

这篇关于有1个下拉框，用不同的选定选项填充多个文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！