<div align="center" class="div2">
<input type="text" readonly="readonly" name="col<%=String.format("%03d", col)%>" id="col<%=String.format("%03d", col++)%>"
class="cInp" style="width: 80px"/>
</div>
<div align="left" class="div1">
<ul align="left" class="close NG" style="width: 70px;">
<li align="left"><input style="width: 30px" type="checkbox" name="ng" value="①" />①</li>
<li align="left"><input style="width: 30px" type="checkbox" name="ng" value="②" />②</li>
<li align="left"><input style="width: 30px" type="checkbox" name="ng" value="③" />③</li>
<li align="left"><input style="width: 30px" type="checkbox" name="ng" value="④" />④</li>
<li align="left"><input style="width: 30px" type="checkbox" name="ng" value="⑤" />⑤</li>
<li align="left"><input style="width: 30px" type="checkbox" name="ng" value="⑥" />⑥</li>
<li align="left"><input style="width: 30px" type="checkbox" name="ng" value="⑦" />⑦</li>
<li align="left"><input style="width: 30px" type="checkbox" name="ng" value="⑧" />⑧</li>
</ul>
</div>
</div>
css样式:
.mdiv{
margin-bottom:10px;
/* position:relative; */
}
.div1{
width:80px;
padding-top:0px;
padding-left:0px;
position:absolute;
}
.div1 ul{
margin-top:0px;
padding-left:0px;
background-color:#ccc;
list-style:none;
}
.div1 ul li{
padding-left:0px;
}
.div1 ul li input{
margin-left:5px;
}
.close{
display:none;
}
.open{
display:block;
}
js:
//input绑定单击事件 实现下拉多选
function addClickInput(){
$(".cInp").click(function(){
var position=$(this).offset();
var $div1 = $(this).parents(".div2").next();
$div1.offset({
top:position.top+22,
left:position.left-30
});
$div1.find(".NG").toggleClass("open");
$div1.find(".NG input[name=ng]").click(function(){
var arr=new Array();
$div1.find("input[name=ng]:checked").each(function(key,value){
arr[key]=$(value).val();
});
var $div2 = $(this).parents(".div1").prev();
$div2.find(".cInp").val("");
$div2.find(".cInp").val(arr.join(","));
});
});
}