时间:2021-05-25
今天做的项目要用到多选的下拉框,开始想在网上找一个插件用用,可是,网上的插件看起来都比较杂乱,我参考了网上的一些插件,自己用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类库
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
利用BootstrapMultiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值首先展示项目案例:多选下拉框功能实现.gi
近期由于工作需要,用户点击下拉框可以试下多选的效果,效果大致如下图:实现的代码如下:1234567最主要的是:multiple:true表示下拉框可以多选,如果
在使用jquery-multiselect(一个把下拉框改造成带checkbox的可以多选的控件)时,正常时应该是下面这样:而它在ie6里是下面这样:其中第一个
第一个下拉框:复制代码代码如下://第一个下拉框里的值第二个下拉框:复制代码代码如下://要3及菜单还可以在次写相应的时间--请选择二级菜单--js代码:复制代
许多页面上都涉及有下拉框,即select标签。对于简单的下拉框,被选择的数据是不需要改变的,我们可以用写死。这样下拉框的数据永远都是那几条。示例:信息一信息二信