Input实现下拉框多选

<div class="mdiv">
<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(",")); 
}); 
});
}