亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

一個簡單的jquery的多選下拉框(自寫)

 更新時間：2014年05月05日 10:41:53   作者：  
想在網(wǎng)上找一個插件用用，可是，網(wǎng)上的插件看起來都比較雜亂，我參考了網(wǎng)上的一些插件，自己用jquery寫了一個多選下拉框
今天做的項目要用到多選的下拉框，開始想在網(wǎng)上找一個插件用用，可是，網(wǎng)上的插件看起來都比較雜亂，我參考了網(wǎng)上的一些插件，自己用jquery寫了一個多選下拉框，js寫得比較簡潔。代碼如下。

js代碼
復制代碼 代碼如下:

(function(){
$.fn.extend({
checks_select: function(options){
jq_checks_select = null;
$(this).click(function(e){
jq_check = $(this);
//jq_check.attr("class", "");
if (jq_checks_select == null) {
jq_checks_select = $("<div class='checks_div_select'></div>").insertAfter(jq_check);
$.each(options, function(i, n){
check_div=$("<div><input type='checkbox' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_select);
check_box=check_div.children();
check_box.click(function(e){
//jq_check.attr("value",$(this).attr("value") );

temp="";
$("input:checked").each(function(i){
if(i==0){
temp=$(this).attr("value");
}else{
temp+="、"+$(this).attr("value");
}
});
jq_check.attr("value",temp);
e.stopPropagation();
});
});
}else{
jq_checks_select.toggle();

}
e.stopPropagation();
});
$(document).click(function () {
jq_checks_select.hide();
});
//$(this).blur(function(){
//jq_checks_select.css("visibility","hidden");
//alert();
//});
}
})

})(jQuery);

html
復制代碼 代碼如下:

<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js">
</script>
<script type="text/javascript" src="js/jquery2.1.js">
</script>
<script type="text/javascript" src="js/jquery-mah-UI.js">
</script>
<script language="javascript">
$(document).ready(function(){
var options = {
1: "第一個選擇項",
2: "第二個選擇項",
3: "第三個選擇項",
4: "第四個選擇項",
5: "第五個選擇項",
6: "第六個選擇項"
};
$("#test_div").checks_select(options);
});
</script>
<style>
.checks_div_select {
width: 150px;
background-color: #e9fbfb;
border: 1px solid #18cbcd;
font-family: 'Verdana', '宋體';
font-size: 12px;
position:absolute;
left:2px;
top:25px;
}
</style>
</head>
<body>
<div style="position:relative;">
<input type="text" id="test_div"/>
</div>
</body>
</html>

需要jquery類庫

相關文章

最新評論