CheckBoxList 和 DropDownList 的二级联动

转载 2007年09月24日 12:56:00
<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;


 

C# DropDownList二级联动问题

需求:点击第一个dropdownlist1,dropdownlist2中的数据根据dropdownlist1选中的值进行变化。 步骤1:拖动两个dropdownlist,分别命名为dropd...
  • redredredlu
  • redredredlu
  • 2015年05月05日 09:21
  • 1908

MVC dropdownlist二级联动

在做输入的时候,有时候需要用到多个dropdownlist联动,所以在网上搜集了相关资料后,自己也拿具体的MVC案例整理了一下,希望可以帮到也在找这个问题的同学们: model: public...
  • feelingdu
  • feelingdu
  • 2017年07月18日 22:21
  • 188

ASP.NET——实现两个下拉框动态联动

这样的动态联动,一般由多个下拉框组成一组菜单,比如上面用到的两个下拉框。下拉菜单之间有联动的关系。当上级的选中项发生改变时,下级会根据上级中的选中项显示相应的内容。 用了动态联动之后,当面...
  • u010066934
  • u010066934
  • 2014年08月11日 16:10
  • 6492

Yii2 二级联动 DropDownList

先随手建库 CIty 和Province| province | CREATE TABLE `province` ( `id` int(11) NOT NULL AUTO_INCREMENT, ...
  • joeson7456
  • joeson7456
  • 2017年08月15日 16:26
  • 394

YII widget之dropDownList的二级联动与分组

第一建表: CREATE TABLE IF NOT EXISTS `sw_category` ( `id` int(11) NOT NULL auto_increment, `parent_i...
  • slyjit
  • slyjit
  • 2013年12月09日 16:00
  • 1882

列表控件(DropDownList,ListBox和BulletedList)

在Web开发中,经常会需要使用列表控件,让用户的输入更加简单。例如在用户注册时,用户的所在地是有限的集合,而且用户不喜欢经常键入,这样就可以使用列表控件。同样列表控件还能够简化用户输入并且防止用户输入...
  • muximuxi_kgsecond
  • muximuxi_kgsecond
  • 2012年12月26日 12:07
  • 679

DropDownList无刷新ajax二级联动效果

页面主要代码:                                                                  Width="200" Aut...
  • zhaohongx
  • zhaohongx
  • 2015年02月15日 17:00
  • 1123

asp.net js实现dropdownlist二级联动(动态)

ASPX端代码: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/...
  • lishimin1012
  • lishimin1012
  • 2014年06月26日 21:06
  • 3221

【.net基础】--DropDownList控件:两级联动

最近学习Asp.Net,发现很多控件都很有意思,例如:Canlender,AdRotator等。以前只知道有这样的页面效果,但是对这些控件了解并不多。不怕不知道,就怕不知道。...
  • successA
  • successA
  • 2015年05月11日 16:45
  • 1698

MVC里面两个dropdownlist联动

MVC view里面有两个dropdownlist分别邦定到两个属性 View里面 @Html.LabelFor(m => m.Name...
  • clear_zero
  • clear_zero
  • 2016年03月21日 19:08
  • 1440
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CheckBoxList 和 DropDownList 的二级联动
举报原因:
原因补充:

(最多只允许输入30个字)