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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
Javascript Select操作大集合
May 26 Javascript
JavaScript中的Function函数
Aug 27 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
angular分页指令操作
Jan 09 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
浅谈es6中的元编程
Dec 01 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新手上路(十)
2006/10/09 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
CI框架表单验证实例详解
2016/11/21 PHP
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python 处理图片像素点的实例
2019/01/08 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python插件机制实现详解
2020/05/04 Python
大学军训感言300字
2014/03/09 职场文书
学生会竞聘书范文
2014/03/31 职场文书
融资租赁计划书
2014/04/29 职场文书
超市创业计划书
2014/09/15 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang