⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 13-6.html

📁 JavaScript经典实例教程代码
💻 HTML
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>级联下拉列表 </TITLE>
<META http-equiv="content-type" CONTENT="text/html;charset=gb2312">
<META NAME="Author" CONTENT="CZH;czh44@sohu.com">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*--------------------------------\
|  Authored by CZH;czh44@sohu.com |
\--------------------------------*/
var types="家电,服饰,家具,日用";
var sub_types_str="电视机,洗衣机,电冰箱,空调|外套,衬衣,大衣,裤子|书桌,书柜,饭桌,衣柜|清洁,洗发,纸品,厨房";
var type_ids_str="0,1,2,3";
var subtype_ids_str="001,002,003,004|101,102,103,104|201,202,203,204|301,302,303,304";
var the_split1=",";
var the_split2="|";
var goods_types=types.split(the_split1);
var type_ids=type_ids_str.split(the_split1);
var sub_types=sub_types_str.split(the_split2);  //元素为以,隔开的mode串
var subtypes_ids=subtype_ids_str.split(the_split2); //
function select()
{
	with(document.goods.gtype)
	{
	var type_sel=options[selectedIndex].text;
	}
	for(var i=0;i<goods_types.length;i++)
	{
		if(goods_types[i]==type_sel)
		{
			var now_subtypes=sub_types[i].split(the_split1);
			var now_subtype_ids=subtypes_ids[i].split(the_split1);
			document.goods.gsub_type.options.length=0;
			document.goods.gsub_type.options.length=now_subtypes.length;
			with(document.all.goods.gsub_type)
			{
				for(var j=0;j<now_subtypes.length;j++)
				{
				options[j].text=now_subtypes[j];
				options[j].value=now_subtype_ids[j];
				}
			}
		break;
		}
	}
		
}
//-------
function initial_select()
{
	document.goods.gtype.length=goods_types.length;
	with(document.goods.gtype)
	{
		for(var i=0;i<goods_types.length;i++)
		{
			options[i].text=goods_types[i];
			options[i].value=type_ids[i];
		
		}
		options[selectedIndex].text=goods_types[0];
		options[selectedIndex].value=type_ids[0];
	}
	var now_subtypes2=sub_types[0].split(the_split1);
	var now_subtype_ids2=subtypes_ids[0].split(the_split1);
	document.goods.gsub_type.options.length=now_subtypes2.length;
	with(document.goods.gsub_type)
	{
		for(var j=0;j<now_subtypes2.length;j++)
		{
			options[j].text=now_subtypes2[j];
			options[j].value=now_subtype_ids2[j];
		}

	}

}
//-->
</SCRIPT>
<BODY>
<form name="goods">
<select name="gtype" onchange="select()" style="width:100">
</select>
<select name="gsub_type" style="width:100">
</select>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
initial_select();
//-->
</SCRIPT>
</BODY>
</HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -