JQuery 多选下拉框
思路:
1.一个text框，获取焦点时显示带有多选框的div
2.默认带有多选框的div隐藏，div宽度为text框宽度
3.选择多选框，点击确定，获取多选框内容赋值给text框，并隐藏div
html代码：
<html>
<head>
<title> multiple file upload test</title>
</head>
<link href="../css/multipleSelect.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resouse/jquery.js"></script>
<script type="text/javascript" src="../js/multipleSelect.js"></script>
<body>
多选：<input id="multipleInput" readonly="readonly" type="text">
<div id="items">
<div id="itemValue">
<li>
<input type="checkbox" name="bike" value="bike" />bike
</li>
<li>
<input type="checkbox" name="car" value="car" />car
</li>
</div>
<div id="butDiv">
<input id="okBut" type="button" value="确 定">
</div>
</div>
</body>
</html>css样式：
#items {
position: absolute;
border:1px solid #9C9C9C;
background-color: #FFF;
display:none;
}
#items li{
list-style: none;
}
#itemValue {
max-height: 150px;
overflow-y: auto;
}
#butDiv input {
float: right;
}$().ready(function(){
var top = $("#multipleInput").offset().top+$("#multipleInput").height()+5;
var left = $("#multipleInput").offset().left;
$("#items").css({
top:top+'px',
left:left+'px',
width:$("#multipleInput").width()+2+'px'
});
$("#multipleInput").focus(function(){
$("#items").show();
});
$("#okBut").click(function(){
var values="";
var checkBoxs = $("#items").find("[type=checkbox]");
for(var i =0;i <checkBoxs.length;i++){
if(checkBoxs[i].checked){
values += $(checkBoxs[i]).val()+",";
}
}
if(values.length>0){
$("#multipleInput").val(values.substring(0,values.length-1));
}else{
$("#multipleInput").val("");
}
$("#items").hide();
});
});效果图：
2907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
