先将本文主要介绍通过Javascript和CSS如何实现一个可编辑的下拉菜单自定义控件。。

近来开发一个管理系统，为了提高用户体验和友好的UI界面，开发了一些自定义控件，本文主要介绍用TextBox模拟可编辑的下拉菜单。此控件具有现实参数名称取值的时候可以直接取到参数对应的编码，如：男——001，女——002；页面显示“男”或“女”，取值时可以取到“男”和“女”对应的编码001和002；大家看到这里可能会有个疑问为什么不直接用DropDownList呢，或者用CheckBoxList和RadioButtonList呢？同样可以解决所提出的问题！那么编辑功能呢？或许你可能还会想到用一个文本框覆盖DropDownList，这次问题貌似就全部搞定了！呵呵。。那我再提出一个问题，要是参数列表中有成千上万的参数呢，用以上的解决方案的话，运行起来的效果大家可向而知，效果是多么的糟糕，！还有人认为那就用文本框覆盖DropDownList在结合Ajax不就把全部问题都解决嘛，但是个人（可能是个人能力有限）认为用文本框覆盖DropDownList不太好布局！！！最后，决定用 JavaScript、Ajax和CSS来模拟一个可编辑下来菜单，为了方便项目组使用和管理，最后集成了一个自定义控件。。

看到这里是不是大家很想知道本控件是怎么实现的和它的强大之处，那么先将控件运行效果与大家分享一下：

图一  初始化

图二  输入参数编码

图三  完成

图四 错误校验功能

控件的实现思路

1.              此控件包括两个文本框和一个小图片，一个文本框用来显示参数名称和输入值，另一个文本框隐藏，用来保存参数对应的编码；用CSS将小图片结合到一起，使其外表像一个下拉菜单（运行效果如图一）。

2.              用根据输入值用Ajax与服务器进行异步交互，获取数据；Server用户可以根据输入值进行筛选数据，在这个过程中解决了参数过多的问题；Client获得到得数据用Javascript进行数据解析再由CSS进行布局的控制（运行效果如图二）。

3.              选择参数过程中，通过Javascript可以将参数名称和对应的编码进行对文本框进行赋值（运行效果如图三）。

4.              此控件可以进行参数正确性的验证（运行效果如图四）。

这样一来，很容易就可以再服务器端获取参数名称和对应的参数编码。

提示：此控件有个小地方想进行改进，就是不想要那个隐藏文本框来保存参数编码；刚开始对此控件扩展了一个属性，用来保存编码，可是在第三个步骤用JavaScript进行赋值和修改扩展属性时，获取不到对属性修改的值和赋的值。还希望大家能帮忙思考一下。。

今天，先写到这里我会逐渐的将具体实现代码贴出来，与大家分享。。