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

 更新时间:2016年08月06日 16:23:05   作者:IamstudyingJava  
这篇文章主要介绍了jquery自动补齐功能插件flexselect用法,结合实例形式分析了flexselect实现自动补齐功能的操作步骤与相关实现技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

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

相关文章

  • 轻松学习jQuery插件EasyUI EasyUI表单验证

    轻松学习jQuery插件EasyUI EasyUI表单验证

    轻松学习jQuery插件EasyUI,本文的重点在于EasyUI表单验证,并告诉大家如何提交表单,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • jQuery背景插件backstretch使用指南

    jQuery背景插件backstretch使用指南

    Backstretch是一款简单的jQuery插件,可以帮助你给网页添加一个动态的背景图片,可以自动调整大小适应屏幕的尺寸,当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形,所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换
    2015-04-04
  • jQuery晃动层特效实现方法

    jQuery晃动层特效实现方法

    这篇文章主要介绍了jQuery晃动层特效实现方法,实例分析了animate方法与css样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jQuery实现 注册时选择阅读条款 左右移动

    jQuery实现 注册时选择阅读条款 左右移动

    本篇文章,小编将为大家介绍jQuery实现 注册时选择阅读条款 左右移动,有需要的朋友可以参考一下
    2013-04-04
  • jquery分页插件jpaginate在IE中不兼容问题

    jquery分页插件jpaginate在IE中不兼容问题

    这篇文章主要介绍了jquery分页插件jpaginate不兼容ie的问题,需要的朋友可以参考下
    2014-04-04
  • 合并table相同单元格的jquery插件分享(很精简)

    合并table相同单元格的jquery插件分享(很精简)

    正好项目中有个小需求, 要求把表格指定列中内容相同的单元格进行合并,本质上涉及的就是td的rowspan属性, 数出含相同内容单元格的个数, 然后给第一个与上一行内容不同的td其rowspan属性附上正确的值即可, 为了能直观的理解
    2011-06-06
  • 基于jQuery实现自动轮播旋转木马特效

    基于jQuery实现自动轮播旋转木马特效

    这篇文章主要介绍了基于jQuery实现自动轮播旋转木马特效,图片轮播效果特别适合做产品展示,感兴趣的小伙伴可以参考下。
    2015-11-11
  • jQuery Ajax()方法使用指南

    jQuery Ajax()方法使用指南

    jQuery.ajax()功能比较强大,可配置的参数比较多,本文主要对这个方法的注意事项进行总结。有相同需求的童鞋们也来仔细看看吧,希望对大家能有所帮助
    2014-11-11
  • jQuery ui1.7 dialog只能弹出一次问题

    jQuery ui1.7 dialog只能弹出一次问题

    之前对于删除操作,一直使用的是头儿写的通用的“确认删除”的方法
    2009-08-08
  • hover的用法及live的用法介绍(鼠标悬停效果)

    hover的用法及live的用法介绍(鼠标悬停效果)

    hover属性在书写css时大家都不会陌生了吧live主要用于对动态加载出来的元素绑定事件,下来将为大家详细介绍下两者的使用,感兴趣的朋友可不要错过了哈
    2013-03-03

最新评论