DHTML4(SELECT与CHECKBOX使用)
1.checkbox例子:<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
<TITLE>获取CHECKBOX选中内容</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION SUM(){
VAR INPUTNODES=DOCUMENT.GETELEMENTSBYNAME("NOTEBOOK");
VAR SUM=0;
FOR(VAR I=0;I<INPUTNODES.LENGTH;++I)
IF(INPUTNODES.CHECKED)
SUM+=PARSEINT(INPUTNODES.VALUE);
VAR SPANNODE=DOCUMENT.GETELEMENTBYID("SUMMONEY");
SPANNODE.INNERHTML="<FONT SIZE='7' COLOR='RED'>"+SUM+"</FONT>";
}
FUNCTION CHECKALL(INDEX){
//VAR CHECKALLNODE=DOCUMENT.GETELEMENTSBYNAME("CHECKALL");//不传入INDEX,也可以直接使用
//EVENT.SRCELEMENT来完成
VAR INPUTNODES=DOCUMENT.GETELEMENTSBYNAME("NOTEBOOK");
FOR(VAR I=0;I<INPUTNODES.LENGTH;++I)
// INPUTNODES.CHECKED=CHECKALLNODE.CHECKED;//直接赋值为"全选"复选框的状态
INPUTNODES.CHECKED=EVENT.SRCELEMENT.CHECKED;
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="CHECKBOX" NAME="CHECKALL" ONCLICK="CHECKALL(0)"/>全选<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="4000" />LENOVO笔记本:4000元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="3000"/>DELL笔记本:3000元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="5000" />ASUS笔记本:5000元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="3500" />ACER笔记本:3500元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="3500" />ACER笔记本:3500元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="13500" />ALIENWARE笔记本:13500元<BR/>
<INPUT TYPE="CHECKBOX" NAME="CHECKALL" ONCLICK="CHECKALL(1)"/>全选<BR/>
<INPUT TYPE="BUTTON" ONCLICK="SUM()" VALUE="计算总金额"/><SPAN ID="SUMMONEY"></SPAN>
</BODY>
</HTML>
checkbox购物车
2.select应用一:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
<TITLE>SELECT动态效果</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS/DOCUMENTTOOLS.JS"></SCRIPT>
<STYLE TYPE="TEXT/CSS">
#TEXTCLASS{
BACKGROUND-COLOR:#FC6;
WIDTH:400PX;
HEIGHT:100PX;
}
#SELTEXT{
BACKGROUND-COLOR:#CCC;
WIDTH:200PX;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="TEXTCLASS">
EACH PRICK SILK HAS A GODDESS IN MY HEART.<BR/>
每一个屌丝心中都有一个女神
</DIV>
<BR/>
<BR/>
<SELECT ID="SELID" ONCHANGE="CHANGE()">
<OPTION VALUE="NONE">--请选择--</OPTION>
<OPTION VALUE="CAPITALIZE">首字母大写</OPTION>
<OPTION VALUE="UPPERCASE">所有字母大写</OPTION>
<OPTION VALUE="LOWERCASE">所有字母小写</OPTION>
</SELECT>
<BR/>
<BR/>
<DIV ID="SELTEXT">
选中的内容:--请选择--
</DIV>
</BODY>
</HTML>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION CHANGE(){
WITH(DOCUMENT){
VAR SELECTNODE=GETELEMENTBYID("SELID");
VAR OPTIONNODES=SELECTNODE.OPTIONS;
VAR SELECTVALUE=OPTIONNODES.VALUE;
GETELEMENTBYID("SELTEXT").INNERHTML="选中的内容:"+SELECTVALUE;
VAR DIVOBJ=GETELEMENTBYID("TEXTCLASS")
DIVOBJ.STYLE.TEXTTRANSFORM=SELECTVALUE;//直接设置STYLE对象中的样式属性TEXTTRANSFORM的值
}
}
</SCRIPT>
select_1_1
3.级联select示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
<TITLE>级联选择</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS/DOCUMENTTOOLS.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION SELECTPRO(){
VAR PROCITY=[["--选择城市--"],["三门峡","平顶山","周口","驻马店"],
["泰安市","威海市","日照市","滨州市"],
["杭州市","温州市","嘉兴市","绍兴市 "],
["东城区","西城区","海淀区","朝阳区"]];
VAR SELPRONODE=BYID("SELPRO");
VAR SELCITYNODE=BYID("SELCITY");
VAR ARRPRO=PROCITY;
//CLEARALL(SELCITYNODE);
SELCITYNODE.OPTIONS.LENGTH=0;//最简单的一种清空方式
FOR(VAR I=0;I<ARRPRO.LENGTH;++I){
VAR OPTIONNODE=DOCUMENT.CREATEELEMENT("OPTION");
SELCITYNODE.OPTIONS.ADD(OPTIONNODE);//或者使用SELCITYNODE.APPENDCHILD(OPTIONNODE);
OPTIONNODE.INNERTEXT=ARRPRO;
}
}
/*常规思路:删除元素*/
FUNCTION CLEARALL(SELCITYNODE){//下次选省前清空上次对应所有市
VAR CHOICES=SELCITYNODE.OPTIONS
FOR(VAR I=0;I<CHOICES.LENGTH;){ //OPTIONS.LENGTH在REMOVE的过程中时刻在变化
//每删除一个,其余元素的索引-1;
CHOICES.REMOVE(I);//该方法移除OPTIONS中指定INDEX元素
//SELCITYNODE.REMOVECHILD(CHOICES);//该方法的执行会引起OPTIONS集合元素索引变化,以及 //OPTIONS.LENGTH变化,两种方法任选一种
}
}
</SCRIPT>
</HEAD>
<BODY>
<SELECT ID="SELPRO" ONCHANGE="SELECTPRO()">
<OPTION VALUE="NONE">--选择省市--</OPTION>
<OPTION >河南</OPTION>
<OPTION >山东</OPTION>
<OPTION >浙江</OPTION>
<OPTION >北京</OPTION>
</SELECT>
<SELECT ID="SELCITY">
<OPTION>--选择城市--</OPTION>
</SELECT>
</BODY>
</HTML>
image
如果再有县等,那么就把县放到一个二维数组,二维数组的第一维和选中的市相对应,然后操作思想和上面相同
关于常规思路清空上次所有的OPTION:
//本想用WITH语句偷懒,没想到引发BUG
WITH(SELCITYNODE){
IF(OPTIONS.LENGTH>1){//除了"选择"OPTION
VAR LENGTH=OPTIONS.LENGTH;//OPTIONS.LENGTH在REMOVE的过程中时刻在变化
//删除的个数(次数:删除LENGTH-1次)是不变的
FOR(VAR I=1;I<LENGTH;++I)
OPTIONS.REMOVE(1);
}
}
ALERT("LENGTH="+SELCITYNODE.OPTIONS.LENGTH);//3 //测试语句,以上使用WITH语句后,集合中的引用不能删除成功
关于WITH语句的BUG:HTTP://WWW.NEOEASE.COM/JAVASCRIPT-WITH-STATEMENT/
(1. Check box example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
< title > get checkbox selection < / Title >
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION SUM(){
VAR INPUTNODES=DOCUMENT. GETELEMENTSBYNAME("NOTEBOOK");
VAR SUM=0;
FOR(VAR I=0;I<INPUTNODES.LENGTH;++I)
IF(INPUTNODES.CHECKED)
SUM+=PARSEINT(INPUTNODES.VALUE);
VAR SPANNODE=DOCUMENT. GETELEMENTBYID("SUMMONEY");
SPANNODE. INNERHTML="<FONT SIZE='7' COLOR='RED'>"+SUM+"</FONT>";
}
FUNCTION CHECKALL(INDEX){
//VAR CHECKALLNODE=DOCUMENT. GETELEMENTSBYNAME("CHECKALL");// It can also be used directly without passing in index
//EVENT. Srelement to complete
VAR INPUTNODES=DOCUMENT. GETELEMENTSBYNAME("NOTEBOOK");
FOR(VAR I=0;I<INPUTNODES.LENGTH;++I)
// INPUTNODES. CHECKED=CHECKALLNODE. CHECKED;// Directly assigned to the state of the "select all" check box
INPUTNODES. CHECKED=EVENT. SRCELEMENT. CHECKED;
}
</SCRIPT>
</HEAD>
<BODY>
< input type = "checkbox" name = "checkall" onclick = "checkall (0)" / > select all < br / >
< input type = "checkbox" name = "notebook" value = "4000" / > Lenovo notebook: 4000 yuan < br / >
< input type = "checkbox" name = "notebook" value = "3000" / > Dell notebook: 3000 yuan < br / >
< input type = "checkbox" name = "notebook" value = "5000" / > ASUS notebook: 5000 yuan < br / >
< input type = "checkbox" name = "notebook" value = "3500" / > ACER notebook: 3500 yuan < br / >
< input type = "checkbox" name = "notebook" value = "3500" / > ACER notebook: 3500 yuan < br / >
< input type = "checkbox" name = "notebook" value = "13500" / > Alienware Notebook: 13500 yuan < br / >
< input type = "checkbox" name = "checkall" onclick = "checkall (1)" / > select all < br / >
< input type = "button" onclick = "sum()" value = "calculate total amount" / > < span id = "summary" > < / span >
</BODY>
</HTML>
Checkbox shopping cart
2. Select application 1:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
< title > select dynamic effect < / Title >
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS/DOCUMENTTOOLS.JS"></SCRIPT>
<STYLE TYPE="TEXT/CSS">
#TEXTCLASS{
BACKGROUND-COLOR:#FC6;
WIDTH:400PX;
HEIGHT:100PX;
}
#SELTEXT{
BACKGROUND-COLOR:#CCC;
WIDTH:200PX;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="TEXTCLASS">
EACH PRICK SILK HAS A GODDESS IN MY HEART.< BR/>
Every loser has a goddess in his heart
</DIV>
<BR/>
<BR/>
<SELECT ID="SELID" ONCHANGE="CHANGE()">
< option value = "None" > -- please select -- < / option >
< option value = "capitalization" > initial capital < / option >
< option value = "uppercase" > all capital letters < / option >
< option value = "lowercase" > all lowercase letters < / option >
</SELECT>
<BR/>
<BR/>
<DIV ID="SELTEXT">
Selected content: - please select--
</DIV>
</BODY>
</HTML>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION CHANGE(){
WITH(DOCUMENT){
VAR SELECTNODE=GETELEMENTBYID("SELID");
VAR OPTIONNODES=SELECTNODE. OPTIONS;
VAR SELECTVALUE=OPTIONNODES. VALUE;
GETELEMENTBYID("SELTEXT"). InnerHTML = "selected content:" + selectvalue;
VAR DIVOBJ=GETELEMENTBYID("TEXTCLASS")
DIVOBJ. STYLE. TEXTTRANSFORM=SELECTVALUE;// Directly set the value of the style attribute texttransform in the style object
}
}
</SCRIPT>
select_ 1_ one
3. Cascade select example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
< title > cascade selection < / Title >
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS/DOCUMENTTOOLS.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION SELECTPRO(){
Var industry = ["-- select city --"], ["Sanmenxia", "Pingdingshan", "Zhoukou", "Zhumadian"],
["Tai'an City", "Weihai City", "Rizhao City", "Binzhou City"],
["Hangzhou", "Wenzhou", "Jiaxing", "Shaoxing"],
["Dongcheng District", "Xicheng District", "Haidian District", "Chaoyang District"]];
VAR SELPRONODE=BYID("SELPRO");
VAR SELCITYNODE=BYID("SELCITY");
VAR ARRPRO=PROCITY;
//CLEARALL(SELCITYNODE);
SELCITYNODE. OPTIONS. LENGTH=0;// The simplest way to empty
FOR(VAR I=0;I<ARRPRO.LENGTH;++I){
VAR OPTIONNODE=DOCUMENT. CREATEELEMENT("OPTION");
SELCITYNODE. OPTIONS. ADD(OPTIONNODE);// Or use selcitynode APPENDCHILD(OPTIONNODE);
OPTIONNODE. INNERTEXT=ARRPRO;
}
}
/*General idea: delete elements*/
Function clean all (selcitynode) {/ / clear all cities corresponding to the last time before the next province selection
VAR CHOICES=SELCITYNODE. OPTIONS
FOR(VAR I=0;I<CHOICES.LENGTH;) {/ / options.length changes from time to time in the process of remove
//Every time one is deleted, the index of other elements is - 1;
CHOICES. REMOVE(I);// This method removes the index element specified in options
//SELCITYNODE. REMOVECHILD(CHOICES);// The execution of this method will cause the element index of the options collection to change, and / / options Length change, choose one of the two methods
}
}
</SCRIPT>
</HEAD>
<BODY>
<SELECT ID="SELPRO" ONCHANGE="SELECTPRO()">
< option value = "None" > -- select provinces and cities -- < / option >
< option > Henan < / option >
< option > Shandong < / option >
< option > Zhejiang < / option >
<OPTION >
)
页:
[1]