blog.Toby
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  130 随笔 :: 2 文章 :: 150 评论 :: 0 Trackbacks
CheckBoxList 和 DropDownList 的二级联动
<script language="javascript" type="text/javascript">
    <!--
        // 添加 CheckBoxList 事件
        function addAffair()
        {
            var checkList = document.getElementById("cblTeamPerson");
            var childrens = checkList.getElementsByTagName("input") ;
            var count = childrens.length ;
            if (count == 0 )
                return ;
                
            var checkBox ;
            var checkBoxid ;
            for (var i = 0 ; i < count ; i ++ )
            {
                checkBoxid = "cblTeamPerson_" + i ;
                checkBox = document.getElementById(checkBoxid);                           
                checkBox.onclick = function(ev)
                {
                    checkedAffair((ev || window.event).srcElement  || ev.currentTarget);
                }
            }            
        }
        
        // 添加 CheckBox 的 onclick 事件
        function checkedAffair(checkBoxID)
        {
            var checkBox = document.getElementById(checkBoxID.id);
            var dropDownList = document.getElementById("ddlTeamLeader");
            if (checkBox.checked == true)
            {
                var newOption = document.createElement("OPTION") ;
                newOption.text = getText(checkBox.id) ;
                newOption.value = getValue(checkBox.id) ;
                dropDownList.options.add(newOption);
            }
            else if (checkBox.checked == false)
            {
                var strValue = getValue(checkBox.id) ;
                var count = dropDownList.options.length ;
                var children ;
                
                for (var i = 0 ; i < count ; i ++)
                {
                    children = dropDownList.options[i].value ;
                    if (children == strValue)
                    {
                        dropDownList.options.remove(i) ;
                     }
                }
            }
        }
        
        // Get the event.onclick Text
        function getText(checkBoxID)
        {
            var checkBoxList = document.getElementById("cblTeamPerson");
            var checkbox = checkBoxList.getElementsByTagName("input");
            var index = getValue(checkBoxID);
            var intIndex = parseInt(index);
            
            alert(checkbox[index].nextSibling.innerHTML);            
            
            var value = checkbox[index].nextSibling.innerHTML ;
            return value ;
        }
        
        // Get the event.onclick Value
        function getValue(checkBoxID)
        { 
            var checkBox = document.getElementById(checkBoxID);
            var factLength = checkBox.id.length;                   
            if (factLength == 15)
            {
                return checkBox.id.substring(14,15) ;
            }
            else
            {
                return checkBox.id.substring(14,16) ;
            }
        }
    //-->
    </script>

 

遇到的2个比较严重的问题

1、在addAffair（）时，页面生成后给客户端生成的单一的checkbox挂onclick事件，如果直接写成

checkBox.onclick = checkedAffair（）；是不响应的，这是在调用函数，应该

checkBox.onclick = function(ev) { 函数 }

 

2、getText（），取不到checkbox的Text，Value貌似确实取不到，改用获取checkbox的ClientID的尾数来记录value的办法，但是getElementById，取到的只是“on”，后来又想根据getElementsByTagName("input")得到checked的index，但是返回的值是undefind，后来又想通过CheckBoxList生成的<table>，用DOM模型来取，依然找不到

解决办法    var value = checkbox[index].nextSibling.innerHTML;



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1577056

posted on 2007-07-18 15:38 渠上月 阅读(721) 评论(0)  编辑  收藏 所属分类: js tips

只有注册用户登录后才能发表评论。
网站导航: