快捷導(dǎo)航

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è)置

復(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://chabaoo.cn/jiaoben/40362.html

您可能感興趣的文章:

select

相關(guān)文章

jQuery地圖map懸停顯示省市代碼分享
這篇文章主要分享jQuery實(shí)現(xiàn)地圖map懸停顯示省市代碼,需要的朋友可以參考下
2015-08-08
深入理解JQuery循環(huán)綁定事件
下面小編就為大家?guī)?lái)一篇深入理解JQuery循環(huán)綁定事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jQuery實(shí)現(xiàn)為L(zhǎng)I列表前3行設(shè)置樣式的方法【2種方法】
這篇文章主要介紹了jQuery實(shí)現(xiàn)為L(zhǎng)I列表前3行設(shè)置樣式的方法,結(jié)合實(shí)例形式分析了css控制及jQuery元素獲取2種實(shí)現(xiàn)方法,需要的朋友可以參考下
2016-09-09
jquery實(shí)現(xiàn)跳到底部，回到頂部效果的簡(jiǎn)單實(shí)例(類(lèi)似錨)
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)跳到底部，回到頂部效果的簡(jiǎn)單實(shí)例(類(lèi)似錨)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
jQuery+Ajax實(shí)現(xiàn)限制查詢間隔的方法
這篇文章主要介紹了jQuery+Ajax實(shí)現(xiàn)限制查詢間隔的方法,涉及jQuery的ajax方法參數(shù)設(shè)置及asp.net后臺(tái)交互的相關(guān)技巧,需要的朋友可以參考下
2016-06-06
jquery 插件之仿“卓越亞馬遜”首頁(yè)彈出菜單效果
用jquery實(shí)現(xiàn)的彈出菜單插件
2008-12-12
9款2014最熱門(mén)jQuery實(shí)用特效推薦
本文給大家匯總了2014年最熱門(mén)的9款jQuery特效插件，小伙伴們根據(jù)自己的需求直接帶走吧。
2014-12-12
Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng)
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
jquery實(shí)現(xiàn)鼠標(biāo)拖拽滑動(dòng)效果來(lái)選擇數(shù)字的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)拖拽滑動(dòng)效果來(lái)選擇數(shù)字的方法,涉及jQuery鼠標(biāo)事件的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-05-05
jQuery實(shí)現(xiàn)手機(jī)自定義彈出輸入框
這篇文章主要介紹了jQuery實(shí)現(xiàn)手機(jī)自定義彈出輸入框的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06