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

2018-9-14

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

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

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

<script lazysrc="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/jquery.flexselect.js"  type="text/JavaScript"></script>
<script lazysrc="${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);





暗色背景
手机扫码阅读本页