当前位置：首页 → 问答吧 → [原创]基于JQUERY的Combo下拉框控件

[原创]基于JQUERY的Combo下拉框控件

时间：2009-11-18

来源：互联网

特点：
    构造初始化时，可传入一个SELECT对象控件，也可以传入DIV容器，程序会自动区分并渲染
    如果初始化时，传入的是SELECT控件，则控件中的内容和使用模式将被缓存到GooCombo对象中
    有三种模式可定义:basic基本,multiple可多选,filter过滤显示
    当Input内容框为可写状态时，可以通过输入TEXT来直接获取要选择的值；
    可定义是否为动态自动载入（即INPUT内容框被选定后再进行数据载入）；
    可以用上/下方向键和回车键来选择内容框中的值；
    可以用AJAX方法，动态从远程服务器上获取下拉内容;
    控件中含有隐藏的SELECT表单控件，ID及NAME都可自定义，这样可使COMBO控件放在一个普通的表单内，用户用一般的提交方式，也可把选中的值准确地传到后台
    经测试，兼容IE6--IE8，Firefox,chrome浏览器，在非IE浏览器下更加美观:)。
另:压缩包中有两个PNG文件,是FIREWORK的编辑文件,大家可以用FIREWORK编辑下拉框右边的按钮外观,或者加入各种16*16大小的PNG小图标,用来装饰下拉框

本人不是“附件设置隐藏，需要回复后才能看到”这样的2B！
图例

GooCombo.rar (106 K) 下载次数:928

作者: sdlddr 发布时间: 2009-11-18

压缩包损坏了，不能打开！

作者: jackychina 发布时间: 2009-11-18

压缩包完好,请重新下载

作者: sdlddr 发布时间: 2009-11-18

很不错, 看看 . 之前一直在用EXT的Combo

作者: margo 发布时间: 2009-11-19

好东西

作者: beginl 发布时间: 2009-11-19

样式确实不错，直接在实际项目中用了！不介意把！谢谢啦！！！

作者: wangyazhen 发布时间: 2009-12-14

这个界面要是再漂亮点就好了!!!

作者: tdmd 发布时间: 2009-12-22

你好楼主，你这个还是比较好的
不过还是有点不足
所谓COMBO就是要可选可编辑，现在getValue返回的始终是选中的内容，而不是输入的内容
要用到COMBO，主要就是为了输入默认选项之外的自定义内容了。

作者: priscilla 发布时间: 2009-12-23

你看下API,可以直接去取文本框中的内容的,文本框已经被JQUERY化,并作为这个COMBO类的成员了

作者: sdlddr 发布时间: 2009-12-23

谢谢，已看到。建议加个getText()方法更好一点

另请问，在asp.net页面里，用后台代码取到你这个客户端控件的值有什么好办法？
（不用AJAX，最好就是Request["text"]）

作者: priscilla 发布时间: 2009-12-24

源代码未压缩,你可以自己加上;
你把这个控件放在FORM里,然后就像对待一般的SELECT表单件一样

作者: sdlddr 发布时间: 2009-12-24

你好，有空试了一下，服务端取不到值，Request.Form["控件名"]不行
控件定义为combo，后台取getValue时控件名用什么？取input时用什么？请指点谢谢

作者: priscilla 发布时间: 2009-12-24

在你初始化时,你要这样设置:
var property={
id:"demo",//this.$div中SELECT控件的ID
name:"demo",//this.$div中SELECT控件的Name
};
//这样可以取到隐藏的SELECT控件的值,但如果你要INPUT文本框的值的话,我得改下程序了

作者: sdlddr 发布时间: 2009-12-24

谢谢分享，学习

作者: liuwei1044 发布时间: 2010-01-07

楼主：看了你的控件发现有这么几个问题
1.初始化定位问题：默认第一个而不是""
2.图片嵌入后，回退删除文本，还是不会重新定位，而是上一次选中值
3.不使用图片，可还是会出现 Internet的图标，而且模糊（可能是那里我没有删除掉）
4.filter方式本地查询效率也太慢了

作者: liuwei1044 发布时间: 2010-01-08

楼主，你这个下拉框盖不住下面的input啊

作者: codebase 发布时间: 2010-03-18

楼主，还有就是，我用的是IE6，现在就是如果下拉框竖着排列，上面的盖不住下面的

作者: codebase 发布时间: 2010-03-18

楼主还是我，我下来了一个sexy-combo看到他没有覆盖问题，后来我发现他引用了一个 <script type="text/javascript" src="jquery.bgiframe.min.js"></script> ，上网看了看是jquery解决覆盖问题的js文件，希望你的问题能解决！

作者: codebase 发布时间: 2010-03-19

人人都能做携程，分享世博盛宴。
HUBS1汇通天下是国内最大的酒店GDS，提供各种酒店预订工具和数据链接。不管您是同业/异业/网站站长/个人创业，我们都有面对不同用户群的酒店预订产品供您使用。
欢迎访问 <a href=http://ota.hubs1.net target=”_blank”>OTA.HUBS1.NET</a> ，加入HUBS1 开放式旅游联盟，获得丰厚收益。

作者: iwang 发布时间: 2010-03-23

赞！