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