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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
解决vue props 拿不到值的问题
Sep 11 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
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
DOM 基本方法
2009/07/18 Javascript
jquery插件之easing使用
2010/08/19 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
Djang中静态文件配置方法
2015/07/30 Python
使用Python来开发微信功能
2018/06/13 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
python实现微信防撤回神器
2019/04/29 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
促销活动总结模板
2014/07/01 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
践行三严三实心得体会
2014/10/13 职场文书
五好家庭申报材料
2014/12/20 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
高中生物教学反思
2016/02/20 职场文书
《山中访友》教学反思
2016/02/24 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript