编程 Javascript

Jquery插件之打造自定义的select标签

Posted in Javascript onNovember 30, 2011

首先看下效果

<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转成自定义的样式

现在只有2个参数可以设置

$(function() { 
$("#test").jsScroll({ showLength: 3, option_click: function() { alert("1"); } }); 
})

showLength:下拉框默认显示数量 ---默认显示5个

option_click:点击每一个option执行的事件--默认是将options的值绑定到input中
在线演示：http://demo.3water.com/js/2011/JQSelect/
打包下载：https://3water.com/jiaoben/40362.html

Jquery插件之打造自定义的select标签

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在JavaScript中获取请求的URL参数

Dec 22 Javascript

JavaScript异步编程:异步数据收集的具体方法

Aug 19 Javascript

javascript获取选中的文本的方法代码

Oct 30 Javascript

JavaScript中实现异步编程模式的4种方法

Sep 24 Javascript

JavaScript代码实现左右上下自动晃动自动移动

Apr 08 Javascript

深入学习Bootstrap表单

Dec 13 Javascript

JS前端加密算法示例

Dec 22 Javascript

JavaScript验证知识整理

Mar 24 Javascript

Vue学习之路之登录注册实例代码

Jul 06 Javascript

vue、react等单页面项目应该这样子部署到服务器

Jan 03 Javascript

jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

Apr 27 jQuery

微信小程序实现滑动翻页效果(完整代码)

Dec 06 Javascript

jquery中dom操作和事件的实例学习仿yahoo邮箱登录框的提示效果

Nov 30 #Javascript

jquery中dom操作和事件的实例学习-表单验证

Nov 30 #Javascript

javascript开发随笔二动态加载js和文件

Nov 25 #Javascript

javascript开发随笔一 preventDefault的必要

Nov 25 #Javascript

基于jquery的拖动布局插件

Nov 25 #Javascript

jQuery Jcrop插件实现图片选取功能

Nov 23 #Javascript

JQUERY1.6 使用方法四检测浏览器

Nov 23 #Javascript