<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<li>工作意愿地:
<%-- <c:forEach items="${list}" var="list">
<input type="checkbox" value="${list.name}" id="wantPlace"
name="wantPlace"
<c:if test="${fn:contains(gzyyd,list.name) }" >checked="true"</c:if> />${list.name }
</c:forEach> --%>
<input type="text" id="intvUnidName" name="intvUnidName" readonly="readonly"></input>
<div style="position:relative">
<input type="hidden" id="intvUnid" name="intvUnid"></input>
<ul style="left: 115px;display: none; width:57%;height: 150px;overflow: auto;list-style: none; position:absolute; background:white;padding-left:10px; border:1px solid #999; z-index:1" id="intvUnidUl" class="intvCheck">
<c:forEach items="${list}" var="list">
<li>
<input type="checkbox" name="checkboxIntvUnid"/>
<span data-value="${list.name}">${list.name}</span>
</li>
</c:forEach>
</ul>
</div>
</li>
<script>
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
$("#intvUnidName").on("click",function(e){
if($("#intvUnidUl").css("display")=="none"){
$("#intvUnidUl").show();
stopPropagation(e);
}else{
$("#intvUnidUl").hide();
stopPropagation(e);
}
})
$("#intvUnidUl").on("click", 'input[name=checkboxIntvUnid]', function(e){
var name = $(this).next().attr("checked",'true').html();
var id = $(this).next().attr("checked",'true').attr("data-value");
intvUnidName = $("#intvUnidName").val();
intvUnid = $("#intvUnid").val();
if($(this).prop("checked")) {
if($(this).length>0){
if(intvUnidName.indexOf("," +name)!=-1){
return ;
stopPropagation(e);
}else{
intvUnidName += "," + name;
intvUnid += ";" + id;
stopPropagation(e);
}
}else{
intvUnidName ="," + name;
intvUnid = ";" + id;
stopPropagation(e);
}
}else{
if(intvUnidName.indexOf("," + name) != -1){
intvUnidName = intvUnidName.replace("," + name,"");
intvUnid = intvUnid.replace(";" + id,"");
stopPropagation(e);
}else{
intvUnidName = intvUnidName.replace( name,"");
intvUnid = intvUnid.replace( id,"");
stopPropagation(e);
}
}
if($.trim(intvUnidName).charAt(0)==","){
intvUnidName = intvUnidName.substring(1) ;
}
if($.trim(intvUnid).charAt(0)==";"){
intvUnid = intvUnid.substring(1) ;
stopPropagation(e);
}
$("#intvUnidName").val(intvUnidName);
$("#intvUnid").val(intvUnid);
stopPropagation(e);
})
</script>
</html>
<input style="width:57%" type="text" id="cityName" name="cityName" readonly="readonly" value="${gzyyd}"></input>
<div style="position:relative">
<ul id="menuUl" class="cityNameCheck" style="left: 115px;display: none; width:57%;height: 150px;overflow: auto;list-style: none; position:absolute; background:white;padding-left:10px; border:1px solid #999; z-index:1">
<c:forEach items="${list}" var="list">
<li>
<input type="checkbox" value="${list.name}" id="wantPlace" name="wantPlace" <c:if test="${fn:contains(gzyyd,list.name) }" >checked="true"</c:if> />
<span data-value="${list.name}">${list.name}</span>
</li>
</c:forEach>
</ul>
</div>
<script type="text/javascript">
// 冒泡点击事件
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
// 点击显示隐藏下拉菜单多选框
$("#cityName").on("click",function(e){
if($("#menuUl").css("display")=="none"){
$("#menuUl").show();
stopPropagation(e);
}else{
$("#menuUl").hide();
stopPropagation(e);
}
})
// 获取点击多选复选框值
$("#menuUl").on("click", 'input[name=wantPlace]', function(e){
// 监听获取多选框选中的值:
var name = $(this).next().attr("checked",'true').html();
// 监听获取选中data-value属性的值: var id = $(this).next().attr("checked",'true').attr("data-value");
cityName = $("#cityName").val();
// 如果选择复选框执行以下操作;则去执行不选择复选框操作。
if($(this).prop("checked")) {
if($(this).length>0){
console.log($(this).length);
if(cityName.indexOf("," +name)!=-1){
console.log(cityName.indexOf("," +name));
return ;
stopPropagation(e);
}else{
cityName += "," + name;
console.log(cityName);
stopPropagation(e);
}
}else{
cityName ="," + name;
stopPropagation(e);
}
}else{
console.log("ddd");
if(cityName.indexOf("," + name) != -1){
cityName = cityName.replace("," + name,"");
stopPropagation(e);
}else{
cityName = cityName.replace( name,"");
stopPropagation(e);
}
}
// 如果选择一个,去掉逗号
if($.trim(cityName).charAt(0)==","){
cityName = cityName.substring(1) ;
}
$("#cityName").val(cityName);//赋值
stopPropagation(e);
})
// 处理点击任意处隐藏下拉菜单
$(window).click(function(){
$(".cityNameCheck").hide();
})
</script>
实例:一
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<link href="css/denglu.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js"></script>
<script src="js/rem.js"></script>
<title>下拉菜单多选框效果</title>
</head>
<body>
<!-- 内容选项 -->
<span>我是下拉菜单多选:</span>
<input type="text" id="intvUnidName" name="intvUnidName" readonly="readonly"></input>
<div style="position:relative">
<input type="hidden" id="intvUnid" name="intvUnid"></input>
<ul style="left: 115px;display: none; width:57%;height: 150px;overflow: auto;list-style: none; position:absolute; background:white;padding-left:10px; border:1px solid #999; z-index:1" id="intvUnidUl" class="intvCheck">
<li>
<input type="checkbox" name="checkboxIntvUnid"/>
<span data-value="1">1</span>
</li>
<li>
<input type="checkbox" name="checkboxIntvUnid"/>
<span data-value="1">2</span>
</li>
<li>
<input type="checkbox" name="checkboxIntvUnid"/>
<span data-value="1">3</span>
</li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
$("#intvUnidName").on("click",function(e){
if($("#intvUnidUl").css("display")=="none"){
$("#intvUnidUl").show();
stopPropagation(e);
}else{
$("#intvUnidUl").hide();
stopPropagation(e);
}
})
$("#intvUnidUl").on("click", 'input[name=checkboxIntvUnid]', function(e){
var name = $(this).next().attr("checked",'true').html();
var id = $(this).next().attr("checked",'true').attr("data-value");
intvUnidName = $("#intvUnidName").val();
intvUnid = $("#intvUnid").val();
if($(this).prop("checked")) {
if($(this).length>0){
if(intvUnidName.indexOf("," +name)!=-1){
return ;
stopPropagation(e);
}else{
intvUnidName += "," + name;
intvUnid += ";" + id;
stopPropagation(e);
}
}else{
intvUnidName ="," + name;
intvUnid = ";" + id;
stopPropagation(e);
}
}else{
if(intvUnidName.indexOf("," + name) != -1){
intvUnidName = intvUnidName.replace("," + name,"");
intvUnid = intvUnid.replace(";" + id,"");
stopPropagation(e);
}else{
intvUnidName = intvUnidName.replace( name,"");
intvUnid = intvUnid.replace( id,"");
stopPropagation(e);
}
}
if($.trim(intvUnidName).charAt(0)==","){
intvUnidName = intvUnidName.substring(1) ;
}
if($.trim(intvUnid).charAt(0)==";"){
intvUnid = intvUnid.substring(1) ;
stopPropagation(e);
}
$("#intvUnidName").val(intvUnidName);
$("#intvUnid").val(intvUnid);
stopPropagation(e);
})
</script>
</body>
</html>
实例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
#wrap{
width: 500px;
height: 500px;
border: 1px solid blue;
margin: 100px auto;
}
#selectBoard{
width: 300px;
height: 20px;
border: 1px solid black;
border-radius: 5px;
position: relative;
margin: 30px auto;
}
#selectBoard ul{
width: 300px;
background: white;
position: absolute;
top: -10px;
left: -10px;
border: 1px solid red;
border-radius: 5px;
display: none;
}
#selectBoard ul li{
list-style: none;
}
#selectBoard ul li:hover{background: dodgerblue;}
#selectBoard img{
position: absolute;
right: 0;
top: 0;
width: 30px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="selectBoard">
<ul>
<li><input type="checkbox" name="" id="" value="北京" />北京</li>
<li><input type="checkbox" name="" id="" value="上海" />上海</li>
<li><input type="checkbox" name="" id="" value="西安" />西安</li>
<li><input type="checkbox" name="" id="" value="石家庄" />石家庄</li>
</ul>
<span id="shuju"></span>
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//定义一个空数组去接收value值
var arr = [];
//仿select的点击事件
$("#selectBoard").click(function(event){
var ev = event || window.event;
//阻止默认事件及封装
if (ev.stopPropagation) {
ev.stopPropagation();
}else{
ev.cancelable = true;
}
$("#selectBoard ul").css("display","block");
});
$(window).click(function(){
$("#selectBoard ul").css("display","none");
});
//监听checkbox的value值 改变则执行下列操作
$("input").change(function(){
if ($(this).prop("checked")) {
arr.push($(this).val()+",");
console.log(arr);
}else{
arr.shift($(this).val()+",");
}
$("#shuju").html(arr);
});
</script>