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);