标题 java 自定义下拉框
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="../jquery.jsp"></jsp:include>
<style type="text/css">
.test{
width: 174px;
height: 190px;
overflow: auto;
float: left;
margin-top: 1px;
border: none;
z-index: 2;
position: absolute;
background: #fcfcfc;
}
.scrollbar{
width: 159px;
height: 300px;
margin: 0 auto;
margin-left: 5px;
}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
#sec{
width: 140px;
border-radius: 6px;
border-color: gray;
}
</style>
<script type="text/javascript">
$(function(){
$("#che1").css("display","none");
$("#che").click(function(){
$("#che1").css("display","");
});
//确认
$("#btn2").click(function(){
var str = show();
if(str== ''){
new Eht.Alert({title:"提示信息"}).show("请选择。。。");
$("#che1").css("display","");
}else{
$("#che1").css("display","none");
}
$("#che").val(str);
});
//获取复选框值
function show(){
obj = document.getElementsByName("name");
check_val = [];
for(k in obj){
if(obj[k].checked)
check_val.push(obj[k].value);
}
return check_val;
}
//input输入自动检索
var cpLock = false;
$('#sec').on('compositionend', function () {
// 结束汉语拼音输入并生成汉字时，解锁搜索框，进行搜索
cpLock = false;
var str = $("#sec").val();
alert('汉字搜索:'+str);
// 接下去放ajax请求生成下拉框内容
});
});
</script>
<title>下拉框多选</title>
</head>
<body>
<br/>
<div>
<div style="float: left;">
<input type="text" id="che" placeholder="点击进行选择" readonly="readonly">
</div>
<div>
<button type="button" id="btn2">确认</button>
</div>
</div>
<div class="test test-1" id="che1">
<div class="scrollbar" >
<div><img src="sec.png"><input type="text" placeholder="请输入" id="sec" ></div>
<input type="checkbox" id="check1" value="1" name="name" class="check">
<label for="check1">姓名1</label><br/>
<input type="checkbox" id="check2" value="2" name="name" class="check">
<label for="check2">姓名2</label><br/>
<input type="checkbox" id="check3" value="3" name="name" class="check">
<label for="check3">姓名3</label><br/>
<input type="checkbox" id="check4" value="4" name="name" class="check">
<label for="check4">姓名4</label><br/>
<input type="checkbox" id="check5" value="5" name="name" class="check">
<label for="check5">姓名5</label><br/>
<input type="checkbox" id="check6" value="6" name="name" class="check">
<label for="check6">姓名6</label><br/>
<input type="checkbox" id="check7" value="7" name="name" class="check">
<label for="check7">姓名7</label><br/>
<input type="checkbox" id="check8" value="8" name="name" class="check">
<label for="check8">姓名8</label><br/>
<input type="checkbox" id="check9" value="9" name="name" class="check">
<label for="check9">姓名9</label><br/>
<input type="checkbox" id="check10" value="10" name="name" class="check">
<label for="check10">姓名10</label><br/>
<input type="checkbox" id="check11" value="11" name="name" class="check">
<label for="check11">姓名11</label><br/>
<input type="checkbox" id="check12" value="12" name="name" class="check">
<label for="check12">姓名12</label><br/>
<input type="checkbox" id="check13" value="13" name="name" class="check">
<label for="check13">姓名13</label>
</div>
</div>
<div>
<input type="text" value="测试" >
</div>
</body>
</html>
