可编辑的下拉框，以及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