关于下拉菜单选项中带有复选框的实现
? ? ?
? ? ? div层 隐藏 页面加载时候遍历子项： kwList：后台List<KeyWord对象>并给以get和set
? ? ? ? ?<div id="areaDiv" style="display: none">
? ? ? ? ? ? ? ?<div id="areaDiv1" style="display: block;">
? ? ? ? ? ? ? ? ? ? ? <s:iterator value="kwList" var="depart"> ? ?<!-- 遍历子项-->
? ? ? ? ? ? ? ? ? ? ?<span style="display: block; white-space: nowrap;">
? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" name="area_select"
? ? ? ? ? ? ? ? ? ? ? ? value="<s:property value='keywordName' />" />
? ? ? ? ? ? ? ? ? ? ? ?<s:property value='keywordName' /> </span>
? ? ? ? ? ? ? ? ? ?</s:iterator>
? ? ? ? ? ? ? </div>
<center>
<div id="sureDiv" style="height: 25px;padding-bottom: 3px" >
<input type="button" value="全选" id="select_all" />
<input type="button" value="确定" id="area_ok"
name="area_ok" />
<input type="button" value="清除" id="de_select_all"
name="de_select_all" />
</div>
</center>
</div>
js中的代码： js版本可自选
<script type="text/javascript" src="<%=basePath%>js/date/jquery-1.5.1.js"></script>
<script type="text/javascript">
var start_x=0; ? //div隐藏层的相关坐标
var start_y=0;
var end_x=0;
var end_y=0;
? ? ?$(function(){ ?
? ? ? ? ? //去除空格，使用到的地方 字符串.Trim(); ?---不知道对不对
? String.prototype.Trim=function(){?
?return this.replace(/(^\s*)|(\s*$)/g,"");?
}});?
?
//点击一个对象并获取其Id 实现对应功能
$(document).bind("click", function(e) {
e = e || window.event;
var which = e.target || e.srcElement;
if (which.id == "area") {
t();
return;
}
if(which.id=="select_all"){
var areas = $("input[name='area_select']");
var isFlag = 0;
for ( var i = 0; i < areas.length; i++) {
if (areas[i].checked) {
isFlag++;
}
}
if (isFlag == areas.length) {
for ( var i = 0; i < areas.length; i++) {
areas[i].checked = false;
}
$("#select_all").attr("value", "全选");
} else {
for ( var i = 0; i < areas.length; i++) {
areas[i].checked = true;
}
$("#select_all").attr("value", "反选");
}
}
if (which.id == "de_select_all") {
$("#select_all").attr("value", "全选");
var areas=$("input[name='area_select']");
for ( var i = 0; i < areas.length; i++) {
areas[i].checked = false;
}
return;
}
if (which.id == "area_ok") {
$("#areaDiv").css("display", "none");
? ?var areaIds = "";
var areaValue = "";
var areas=$("input[name='area_select']");
for(var i = 0; i < areas.length; i++) {
if (areas[i].checked) {
areaIds += areas[i].value + ",";
}
}
? //获取拼接后的字符串 显示到文本框中
document.getElementById("area").value = areaIds.substring(0,areaIds.length - 1);
return;
}
var x = e.pageX;
var y = e.pageY;
if (x >= start_x && x <= end_x && start_y <= y && end_y >= y) {
$("#areaDiv").css("display", "block");
} else {
$("#areaDiv").css("display", "none");
start_x = 0;
start_y = 0;
end_x = 0;
end_y = 0;
}
});
//t()函数是 对div隐藏层的 加载和数据是否选中的绑定
function t(){
? $("#select_all").attr("value","全选");
? var areaValue=$("#area").val();
? areaValue=areaValue.replace(/^s+|s+$/g,'');?
? var areas=$("input[name='area_select']");
? if(areaValue!=""){
? ? ? ? ? //如果文本框不为空
? ? ? ? ? //第一步：设置所有复选框均不选中
? for(var i=0;i<areas.length;i++){
areas[i].checked=false;
? }
? ? ? ? ? //第二步：获取文本框中的值 分割后遍历checked集合 并是对应到的字符串option的checked="true"
?var areaArray=areaValue.split(",");
?for(var i=0;i<areaArray.length;i++){
?for(var j=0;j<areas.length;j++){
?var ij=areaArray[i];
?if(ij==areas[j].nextSibling.nodeValue.Trim()){
?areas[j].checked=true;
?break;
?}
?}
?}
? }else{
for(var i=0;i<areas.length;i++){
areas[i].checked=false;
}
? }
//获取 文本框的相应坐标
var left=$("#area").offset().left;
var top=$("#area").offset().top+$("#area").outerHeight();
var areaDivHeight;
start_x=left;
start_y=top;
end_x=left+$("#area").outerWidth();
end_y=top+$("#areaDiv").outerHeight();
areaDivHeight=end_y;
//设定div隐藏层的坐标
if(areaDivHeight>=200)
$("#areaDiv1").css("height",200).css("overflow","auto");
}else{
$("#areaDiv1").css("overflow-x","auto");
}
$("#areaDiv").css("display","block").css("overflow","hidden").css("line-height","25px").css("background","#ffffff").css("position","absolute").css("border","1px solid #cccccc").css("left",left+"px").css("top",top+"px").css("width",$("#area").outerWidth()-2);
?
}
</script>
?
缺陷：点击【全选】后 【全选】会变成【反选】 但是 如果点击文本框 子项中有对应的勾选值
是不能【反选的】 原因： div隐藏层出现时 ?初始化为【全选】 ??
-------------------- ? ?如果有什么错误的地方或好的修改方法 ?请指大家不吝赐教?
?
