关于下拉菜单选项中带有复选框的实现

原理： 点击文本框 显示隐藏的div层  div层中是遍历后的菜单选项 当做option

Jsp：

        文本框 显示到页面：

       <input type="text" readonly="readonly"  name="keyword" size="30" id="area" value="${keyword}"/>

     

      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;">

                      &nbsp;&nbsp;<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" class="btn"

name="select_all" />

&nbsp;

<input type="button" value="确定" class="btn" id="area_ok"

name="area_ok" />

&nbsp;

<input type="button" value="清除" class="btn" 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隐藏层出现时  初始化为【全选】   

--------------------    如果有什么错误的地方或好的修改方法  请指大家不吝赐教