<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<meta name="author" content="Beauty" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.beautifySelect.js"></script>
<!-- Date: 2014-08-30 -->
</head>
<body>
<div style="margin:20px;">
<select id="sel1"></select>
<select id="sel2"></select>
<button onclick="redraw()">重绘</button>
</div>
<script type="text/javascript">
$(function(){
var _html = "";
for(var i = 0;i<22;++i){
_html += "<option>" +i+"闲来无事写插件"+"</option>";
}
document.getElementById("sel1").innerHTML = _html;
document.getElementById("sel2").innerHTML = _html;
$("#sel1").beautifySelect({
"maxShowItemNum" : 9,
"downIcon" : "url(down.png) right no-repeat",
"upIcon" : "url(up.png) right no-repeat"
});
$("#sel1").change(function(){
console.log(this.value+"改变");
});
});
function redraw(){
//如果select内容发生变化，相应重绘部分
var _html = "";
for(var i = 0 ;i<13;++i){
_html += "<option>" +i+"内容改变啦"+ "</option>";
}
document.getElementById("sel1").innerHTML = _html;
$("#sel1").beautifySelect({
"sDivStyle" : {
"border" : "1px solid red"
}
});
}
</script>
</body>
</html>
基于jquery的美化select插件
5星 · 超过95%的资源 需积分: 9 177 浏览量
2014-09-02
22:24:28
上传
评论
收藏 71KB 7Z 举报 
test.7z （5个子文件） 
test 
jquery.beautifySelect.js 7KB
up.png 366B jquery-1.8.2.js 261KB down.png 375B
test.html 2KB资源评论
qq_309707132015-08-31非常好用！
