脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-一个简单的jquery的多选下拉框分享，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
今天做的项目要用到多选的下拉框，开始想在网上找一个插件用用，可是，网上的插件看起来都比较杂乱，我参考了网上的一些插件，自己用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 = $("<p class='checks_p_select'></p>").insertAfter(jq_check);
$.each(options, function(i, n){
check_p=$("<p><input tyPE='checkbox' value='" + n + "'>" + n + "</p>").appendTo(jq_checks_select);
check_box=check_p.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>
<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_p").checks_select(options);
});
</script>
<style>
.checks_p_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>
<p style="position:relative;">
<input type="text" id="test_p"/>
</p>
</body>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-一个简单的jquery的多选下拉框分享全部内容，希望文章能够帮你解决javascript代码实例教程-一个简单的jquery的多选下拉框分享所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。