jquery自動(dòng)補(bǔ)齊功能插件flexselect用法示例
本文實(shí)例講述了jquery自動(dòng)補(bǔ)齊功能插件flexselect用法。分享給大家供大家參考,具體如下:
這幾天正在做一個(gè)東東。需要用到自動(dòng)補(bǔ)齊的功能。也就是select控件的文本項(xiàng)可以讓它寫。默認(rèn)的select文本框是只讀的,不能寫。在網(wǎng)上找到一個(gè)jQuery插件:flexselect可以完成這項(xiàng)功能。
將插件放到項(xiàng)目里。然后在頁(yè)面中引用這個(gè)插件。
<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()}); } }); });
但是這樣的話,與其中一個(gè)其它js沖突。目前還不知道怎么回事,有待研究!
另外,如果select是通過js動(dòng)態(tài)生成的。那么在相應(yīng)的位置加下這么一句:$("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>"; //注意:如果不加這一句,就不會(huì)出效果~~ 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);
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery 插件autocomplete自動(dòng)完成應(yīng)用(自動(dòng)補(bǔ)全)(asp.net后臺(tái))
- Jquery插件仿百度搜索關(guān)鍵字自動(dòng)匹配功能
- jQuery自動(dòng)完成插件completer附源碼下載
- PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能
- jQuery autocomplate 自擴(kuò)展插件、自動(dòng)完成示例代碼
- jquery autocomplete自動(dòng)完成插件的的使用方法
- jQuery Autocomplete自動(dòng)完成插件
- jquery自動(dòng)完成插件(autocomplete)應(yīng)用之PHP版
相關(guān)文章
Spring shiro + bootstrap + jquery.validate 實(shí)現(xiàn)登錄、注冊(cè)功能
這篇文章主要介紹了Spring shiro + bootstrap + jquery.validate 實(shí)現(xiàn)登錄、注冊(cè)功能,需要的朋友可以參考下2017-06-06EasyUI中實(shí)現(xiàn)form表單提交的示例分享
這里給大家分享的是一段使用EasyUI中實(shí)現(xiàn)form表單提交的方法的核心代碼,小伙伴們根據(jù)自己的需求補(bǔ)全form部分吧,希望大家能夠喜歡。2015-03-03jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果,實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01jQuery滾動(dòng)條插件nanoscroller使用指南
本文給大家介紹的nanoScrollerJS是一款使用簡(jiǎn)單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動(dòng)條效果的jQuery插件。該滾動(dòng)條插件利用原生的滾動(dòng)條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06JQuery讀取XML文件數(shù)據(jù)并顯示的實(shí)現(xiàn)代碼
今天向大家演示如何通過JQuery框架為空白HTML文檔加載從XML文件讀取的數(shù)據(jù)并顯示出來。我們將會(huì)主要用到JQuery自帶過程$.get 。2009-12-12