jquery自动补齐功能插件flexselect用法示例


Posted in Javascript onAugust 06, 2016

本文实例讲述了jquery自动补齐功能插件flexselect用法。分享给大家供大家参考,具体如下:

这几天正在做一个东东。需要用到自动补齐的功能。也就是select控件的文本项可以让它写。默认的select文本框是只读的,不能写。在网上找到一个jQuery插件:flexselect可以完成这项功能。

将插件放到项目里。然后在页面中引用这个插件。

<script src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/jquery.flexselect.js"  type="text/JavaScript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/liquidmetal.js"  type="text/javascript"></script>
<link href="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/flexselect.css" rel="stylesheet" type="text/css" >

然后在js脚本中写入这样的代码:

<script type="text/javascript">
jQuery(document).ready(function(){
 $("select[class*=flexselect]").flexselect();
});
</script>

刚开始是这样写的:

<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function(){
 jq("select[class*=flexselect]").flexselect();
 jq("#province").change(function (){
 jq("#city").empty();
 if($("#province").val() != "") {
  ajaxPost("${pageContext.request.contextPath}/test/queryCityByProvince.do",backCity,{"province":jq("#province").val()});
 }
 });
});

但是这样的话,与其中一个其它js冲突。目前还不知道怎么回事,有待研究!

另外,如果select是通过js动态生成的。那么在相应的位置加下这么一句:$("select[class*=flexselect]").flexselect();

function backQuery(data){
 var result=data[0]['resultList'];
 var html="";
 html+="<td width='25%'>serial分组<font color='red'>*</font>:</td>";
html+="<script type='text/javascript'>$(\"select[class*=flexselect]\").flexselect()\;<\/script>"; //注意:如果不加这一句,就不会出效果~~
html+="<td width='75%'><select name='serialTeamName' class='flexselect' style='width:200px'>";.
for(var i=0;i<result.length;i++){
 html+="<option value="+result[i]['name']+">"+result[i]['name']+"</option>";
}
html+="</select></td>";
$("#serialGroupTr").append(html);

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
layui文件上传实现代码
May 20 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
Google 地图类型详解及示例代码
Aug 06 #Javascript
Google 地图控件集详解及实例代码
Aug 06 #Javascript
Google 地图事件实例讲解
Aug 06 #Javascript
Google 地图叠加层实例讲解
Aug 06 #Javascript
Google Maps基础及实例解析
Aug 06 #Javascript
浅谈js的html元素的父节点,子节点
Aug 06 #Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 #Javascript
You might like
php删除指定目录的方法
2015/04/03 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
永不消失的title提示代码
2007/02/15 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
js post提交调用方法
2014/02/12 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python中的各种装饰器详解
2015/04/11 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python中的默认参数实例分析
2018/01/29 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
python三引号如何输入
2020/07/06 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
建筑工程毕业生自我鉴定
2014/01/14 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫