三级联动(方法一)

最新推荐文章于 2016-09-22 21:56:00 发布

icecreamchen

最新推荐文章于 2016-09-22 21:56:00 发布

阅读量603

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： function javascript 手机华硕联想三星

本文链接：https://blog.youkuaiyun.com/icecreamchen/article/details/2582109

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文提供了一个使用JavaScript实现的三级联动菜单示例代码。通过选择不同的手机品牌，可以动态加载该品牌下的手机型号，并进一步获取对应的下载地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚接触JS.下面是为实现三级联动而写的代码. 三级联动:当第一个下拉框选择不同品牌，第二个下拉框变为该品牌对应的手机型号，第二个下拉框变化后,第三个下拉框出现下载该手机型号的下载地址方法一:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>联动</title>

  <script language="javascript">

  			var cell = new Array(31); //每个数组存储同一品牌的手机型号

			//注意添加新型号时，用于间隔的“，”应使用英文（半角）输入

			cell[0] = new initArray("S500","D810","S640","P660","P860","D805","S600","E806c","S1","P5500","E616","D802","P3450","P4550","U1000","D600","9100/9110","C858","M700","P800","CHT9000","MUSE","830","838","900"); //多普达机型

			cell[1] = new initArray("SGH-i728","SPH-M4650","SCH-i760","SGH-i718+"); //三星

			cell[2] = new initArray("X1");//索尼爱立信

			cell[3] = new initArray("KG200","KC1"); //LG

			cell[4] = new initArray("ET860","TITAN","ET980T","ET600","ET980"); //联想

			cell[5] = new initArray("Q8","Q9"); //摩托罗拉

			cell[6] = new initArray("E908"); //波导

			cell[7] = new initArray("T6","N810","N800","E870","E860","E850","E800");//夏新 

			cell[8] = new initArray("rw6818","612","rw6965","rw6828");//惠普

			cell[9] = new initArray("N99");//海尔 

			cell[10] = new initArray("A702","A501","A701","神达 A700");//神达

			cell[11] = new initArray("XDA Orbit II","Helen","Argon","Flame","Orbit","Zinc","Atom Life","Atom Exec","Atom","Stealth");//O2

			cell[12] = new initArray("P320","P550","P527","P750","P526","P735","P535","P525"); //华硕

			cell[13] = new initArray("PDAG","Jama 101","9502","8502","8150","7150","6150","5150","JAQ4","JAQ","JAQ3"); //i-mate

			cell[14] = new initArray("P51"); //明基 

			cell[15] = new initArray("8260","768","838G2","728B","728");//酷派

			cell[16] = new initArray("C180","K869"); //OKWAP

			cell[17] = new initArray("XV6900","XV6800","P903"); //UT斯达康 

			cell[18] = new initArray("A200"); //现代

			cell[19] = new initArray("G1000","W1000","G901"); //HKC

			cell[20] = new initArray("M9"); //纽曼 

			cell[21] = new initArray("G889"); //三巨网

			cell[22] = new initArray("T5"); //汇讯

			cell[23] = new initArray("S601","S630","P890"); //IDO

			cell[24] = new initArray("3360");//摩普达

			cell[25] = new initArray("X800","M500+","G500+","M700","X500","G500","M800","V900","X650"); //倚天

			cell[26] = new initArray("P30"); //华禹

			cell[27] = new initArray("G2046");//振华欧比

			cell[28] = new initArray("i300","i120","g-Smart i","i350","t600","i128","MW998"); //技嘉

			cell[29] = new initArray("G830") //创维

			cell[30] = new initArray("G9988"); //海信



			var downloc = new Array(1);

//当有多个地址时直接参与在后面添加,如当有两个地址时：

//downloc[0] = new initArray("http://mobi.idoican.com.cn/xebreader/ApabiMobippc5010.CAB","http://mobi.idoican.com.cn/xebreader/ApabiMobippc5011.CAB"); 	

//第一个地址对应：downloc[0][1]，第二个地址对应：downloc[0][2]，添加时应注意输入法是英文	

//			downloc[0] = new initArray("http://mobi.idoican.com.cn/xebreader/ApabiMobippc5011.CAB");

//			var downlocation = "";





	function changelocation(str) {

			var num = str;

			document.phone.subclassfy.options.length=cell[num].length;

			for(var i=1; i<=cell[num].length; i++ ) {

				document.phone.subclassfy.options[i-1].text = cell[num][i];

				document.phone.subclassfy.options[i-1].value = cell[num][i];

			}



			//当第二类手机类型（subclassfy）为默认值时，

			changeDownLoc(document.phone.subclassfy.options[0].value);

	}	

		

	function initArray() {

      this.length = initArray.arguments.length;

      for (var i = 0; i < this.length; i++)

      	this[i+1] = initArray.arguments[i];

   }



	function changeDownLoc(str){

		var product = str;

		switch(product){

			//可以自己添加不同手机型号相应的下载地址，否则下载地址为默认地址：default。

			//例如手机“S501”对应下载地址为：downloc[0][2]时，代码为：case "S501":downlocation = downloc[0][2];

			  case "S500":downlocation = downloc[0][1];

			  		break;

			  case "D810":downlocation = downloc[0][1];

			  		break;

			  case "S640":downlocation = downloc[0][1];

			  		break;

			  default:downlocation = downloc[0][1];

		 }

	}

	

	function getPath(){

		document.getElementById("imagepnone").href = downlocation;

	}

</script>





  <style type="text/css">

<!--



img {

	text-decoration: none;

}

-->

  </style>

</head>



<body>



<form name="phone" id="phone"  method="post" action="http://mobi.idoican.com.cn/xebreader/ApabiMobippc5010.CAB">



  <select name="classfy" id="classfy" size="1" onChange="changelocation(document.phone.classfy.options[document.phone.classfy.options.selectedIndex].value)" style="width:100px" >

    <option selected="selected">请选择品牌</option>

	<option value="0" >多普达</option>

    <option value="1">三星</option>

    <option value="2">索尼爱立信</option>

    <option value="3">LG</option>

    <option value="4">联想 </option>

    <option value="5">摩托罗拉</option>

    <option value="6">波导</option>

    <option value="7">夏新</option>

    <option value="8">惠普</option>

    <option value="9">海尔</option>

    <option value="10">神达</option>

    <option value="11">O2</option>

    <option value="12">华硕</option>

    <option value="13">i-mate</option>

    <option value="14">明基</option>

    <option value="15">酷派</option>

    <option value="16">OKWAP</option>

    <option value="17">UT斯达康</option>

    <option value="18">现代</option>

    <option value="19">HKC</option>

    <option value="20">纽曼</option>

    <option value="21">三巨网</option>

    <option value="22">汇讯</option>

    <option value="23">IDO</option>

    <option value="24">摩普达</option>

    <option value="25">倚天</option>

    <option value="26">华禹</option>

    <option value="27">振华欧比</option>

    <option value="28">技嘉</option>

    <option value="29">创维</option>

    <option value="30">海信</option>

  </select>

  

  <select name="subclassfy" id="subclassfy"  size="1"  onChange="changeDownLoc(document.phone.subclassfy.options[document.phone.subclassfy.options.selectedIndex].value)" style="width:100px">

		<option  selected="selected">请选择型号</option>		

  </select>



  <img onClick="javascript:document.phone.submit();" height="39" src="file:///F|/idoican/anniu.jpg" width="102" align="absmiddle" style="cursor:pointer; text-decoration:none" border="none"/>

	

</form>

</body>

</html>