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中element选择器用法实例
Dec 29 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
原生JS实现幻灯片
Feb 22 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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
php5数字型字符串加解密代码
2008/04/24 PHP
php strcmp使用说明
2010/04/22 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
PHP反射API示例分享
2016/10/08 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
flexigrid 参数说明
2010/11/23 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python利用faker库批量生成测试数据
2020/10/15 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
animation和transition的区别
2020/10/12 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
校园餐饮创业计划书
2014/01/10 职场文书
经典安踏广告词
2014/03/21 职场文书