可编辑的下拉框，以及js获取DropDownList的Text和Value

今天遇见一个问题需要使用可编辑的DropDownList,之前在网上看到过解决方案，但是并没怎么留意，拿到问题的时候也觉得是一个十分容易的问题，但是在解决的过程中还是碰了不少壁.

      .net中并不提供可编辑的DropDownList控件，一般的解决方案是采用textbox和dropdownlist来实现，当然我们也可以采用html中的textbox和select控件来实现，基本原理都是一样的。首先看下我的可编辑下拉框的代码，是从网上copy的一段代码进行修改的：

view plaincopy to clipboardprint?
<asp:DropDownList ID="DropDownList2"  runat="server"   
                       Width="180px"   style="position:absolute;margin-top:5px;" mce_style="position:absolute;margin-top:5px;" >  
                       </asp:DropDownList>  
                   <div>   
                   <iframe id="DivShims" src="javascript:false;" mce_src="javascript:false;" scrolling="no"   
                   frameborder="0" style="position:absolute; height: 20px;margin-top:-10px; " width="158px">  
                   </iframe>  
                   <asp:TextBox id="txtBank_Name" runat="server"  style="width: 158px; position:absolute;  height:16px; margin-top:-10px;"></asp:TextBox>  
                    </div> 
     <asp:DropDownList ID="DropDownList2"  runat="server"
                            Width="180px"   style="position:absolute;margin-top:5px;" mce_style="position:absolute;margin-top:5px;" >
                            </asp:DropDownList>
                        <div>
                        <iframe id="DivShims" src="javascript:false;" mce_src="javascript:false;" scrolling="no"
                        frameborder="0" style="position:absolute; height: 20px;margin-top:-10px; " width="158px">
                        </iframe>
                        <asp:TextBox id="txtBank_Name" runat="server"  style="width: 158px; position:absolute;  height:16px; margin-top:-10px;"></asp:TextBox>
                         </div>

这段代码的思路是用txtBank_Name将DropDownList控件的显示框遮住，而我们可以在txtBank_Name中输入，也可以点击下拉按钮，将选择的值绑定到txtBank_Name上。 

      关于css中position的知识，个人参考的网站是：http://www.ybky.cn/jwdetail_35994.html。这里就不多说，记得在这段代码的上层容器中加上position:relative。

      接下来需要处理的是当dropdownlist的选定项发生改变时，需要文本框中的值也随之发生变化。在这里可以通过js来处理，为dropdownlist添加onchange事件，当触发onchange事件是，可以获取到当前选定项的值，将这个值赋给文本框即可。可一下是相关的js处理代码，即如何使用js来获取到当前选定的值：

 view plaincopy to clipboardprint?
var ddl = document.getElementById("dropdownlist2")     
var index = ddl.seletedIndex;     
    
var Value = ddl.options[index].value;     
var Text = ddl.options[index].text;   
documnet.getElementById("txt_BankName").Value = Text; 

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/huhqian/archive/2009/10/14/4671029.aspx