Jquery插件之打造自定義的select標(biāo)簽
更新時(shí)間：2011年11月30日 20:14:46 作者：
自帶的select標(biāo)簽有時(shí)候不能滿足我們的需求，所以自定義一個(gè)select標(biāo)簽插件，需要的朋友可以參考下。
首先看下效果
<head>
<title></title>
<link type="text/css" rel="Stylesheet" href="JQSelect.css" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="JQSelect.js"></script>
<script type="text/javascript">
$(function() {
$("#test").jsScroll();
})
</script>
</head>
<body>
<select id="test">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
比較簡(jiǎn)陋只是將select轉(zhuǎn)成自定義的樣式
現(xiàn)在只有2個(gè)參數(shù)可以設(shè)置
$(function() {
$("#test").jsScroll({ showLength: 3, option_click: function() { alert("1"); } });
})
showLength:下拉框默認(rèn)顯示數(shù)量 ---默認(rèn)顯示5個(gè)
option_click:點(diǎn)擊每一個(gè)option執(zhí)行的事件--默認(rèn)是將options的值綁定到input中
在線演示：http://demo.jb51.net/js/2011/JQSelect/
打包下載：http://m.fzitv.net/jiaoben/40362.html
復(fù)制代碼 代碼如下:
<head>
<title></title>
<link type="text/css" rel="Stylesheet" href="JQSelect.css" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="JQSelect.js"></script>
<script type="text/javascript">
$(function() {
$("#test").jsScroll();
})
</script>
</head>
<body>
<select id="test">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
比較簡(jiǎn)陋只是將select轉(zhuǎn)成自定義的樣式
現(xiàn)在只有2個(gè)參數(shù)可以設(shè)置
復(fù)制代碼 代碼如下:
$(function() {
$("#test").jsScroll({ showLength: 3, option_click: function() { alert("1"); } });
})
showLength:下拉框默認(rèn)顯示數(shù)量 ---默認(rèn)顯示5個(gè)
option_click:點(diǎn)擊每一個(gè)option執(zhí)行的事件--默認(rèn)是將options的值綁定到input中
在線演示：http://demo.jb51.net/js/2011/JQSelect/
打包下載：http://m.fzitv.net/jiaoben/40362.html
您可能感興趣的文章:
- jQuery插件cxSelect多級(jí)聯(lián)動(dòng)下拉菜單實(shí)例解析
- jQuery使用Selectator插件實(shí)現(xiàn)多選下拉列表過濾框(附源碼下載)
- jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- JQuery擴(kuò)展插件Validate—6 radio、checkbox、select的驗(yàn)證
- lyhucSelect基于Jquery的Select數(shù)據(jù)聯(lián)動(dòng)插件
- jquery select插件異步實(shí)時(shí)搜索實(shí)例代碼
相關(guān)文章
JQuery實(shí)現(xiàn)動(dòng)態(tài)操作表格
本文主要分享了jQuery實(shí)現(xiàn)對(duì)一個(gè)表格動(dòng)態(tài)的添加行，刪除行，并且對(duì)表格中內(nèi)容進(jìn)行非空驗(yàn)證的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了在jQuery中處理XML數(shù)據(jù)的大致方法,jQuery是當(dāng)下人氣最高的JavaScript庫,需要的朋友可以參考下2015-08-08
第一次認(rèn)識(shí)jquery延遲對(duì)象，這篇文章主要為大家詳細(xì)解析JQ延遲對(duì)象的相關(guān)概念,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
最近在做一個(gè)項(xiàng)目，里面需要js 異步請(qǐng)求的時(shí)候，把上一次的的請(qǐng)求取消2010-10-10
jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁的方法
這篇文章主要介紹了jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁的方法,以實(shí)例形式較為詳細(xì)的分析了本地分頁的原理與相關(guān)的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02
下面小編就為大家?guī)硪黄獪\談jquery中next與siblings的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
jQuery向webApi提交post json數(shù)據(jù)
這篇文章主要介紹了jQuery向webApi提交post json數(shù)據(jù)的方法，非常不錯(cuò)，需要的的朋友參考下2017-01-01
利用jquery正則表達(dá)式在頁面驗(yàn)證url網(wǎng)址輸入是否正確
這篇文章主要介紹了關(guān)于利用jquery正則表達(dá)式在頁面驗(yàn)證url網(wǎng)址輸入是否正確的相關(guān)資料，文中給出了完整的示例代碼，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
Jquery日期選擇datepicker插件用法實(shí)例分析
這篇文章主要介紹了Jquery日期選擇datepicker插件用法,實(shí)例分析了datepicker插件的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery基礎(chǔ)語法,以實(shí)例形式分析了jQuery的對(duì)象以及針對(duì)對(duì)象進(jìn)行的操作用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12