Chinaunix首页 | 论坛 | 博客

我就是喜欢赖床的ChinaUnix博客

首页　| 　博文目录　| 　关于我

我就是喜欢赖床

  • 博客访问： 49391
  • 博文数量： 17
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 340
  • 用 户 组： 普通用户
  • 注册时间： 2013-04-10 15:23
文章分类

全部博文（17）

文章存档

2014年（1）

2013年（16）

我的朋友
最近访客
推荐博文
通过javascript静态实现 下拉框的联动 非数据库篇

分类： JavaScript

2013-06-27 22:21:49


点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <title>下拉框的联动</title>
  4. <script language="javascript">
  5.     function Change(){
  6.     if(document.ldfrm.s1.selectedIndex==0)
  7.     {
  8.         document.ldfrm.s2.length=1;
  9.         document.ldfrm.s2.selectedIndex=0;
  10.         document.ldfrm.s2.options[0].text="please choose!";
  11.         document.ldfrm.s2.options[0].value="please choose!";
  12.     }
  13.     if(document.ldfrm.s1.selectedIndex==1)
  14.     {
  15.         document.ldfrm.s2.length=4;
  16.         document.ldfrm.s2.selectedIndex=0;
  17.         document.ldfrm.s2.options[0].text="please choose!";
  18.         document.ldfrm.s2.options[0].value="please choose!";
  19.         document.ldfrm.s2.options[1].text="Dalian";
  20.         document.ldfrm.s2.options[1].value="Dalian";
  21.         document.ldfrm.s2.options[2].text="Tieling";
  22.         document.ldfrm.s2.options[2].value="Tieling";
  23.         document.ldfrm.s2.options[3].text="Shenyang";
  24.         document.ldfrm.s2.options[3].value="Shenyang";
  25.     }
  26.         if(document.ldfrm.s1.selectedIndex==2)
  27.     {
  28.         document.ldfrm.s2.length=4;
  29.         document.ldfrm.s2.selectedIndex=0;
  30.         document.ldfrm.s2.options[0].text="please choose!";
  31.         document.ldfrm.s2.options[0].value="please choose!";
  32.         document.ldfrm.s2.options[3].text="Haerbin";
  33.         document.ldfrm.s2.options[3].value="Haerbin";
  34.         document.ldfrm.s2.options[1].text="Suihua";
  35.         document.ldfrm.s2.options[1].value="Suihua";
  36.         document.ldfrm.s2.options[2].text="Daqing";
  37.         document.ldfrm.s2.options[2].value="Daqing";
  38.     }
  39.         if(document.ldfrm.s1.selectedIndex==3)
  40.     {
  41.         document.ldfrm.s2.length=4;
  42.         document.ldfrm.s2.selectedIndex=0;
  43.         document.ldfrm.s2.options[3].text="Changchun";
  44.         document.ldfrm.s2.options[3].value="Changchun";
  45.         document.ldfrm.s2.options[1].text="Jilin";
  46.         document.ldfrm.s2.options[1].value="Jilin";
  47.         document.ldfrm.s2.options[2].text="Tonghua";
  48.         document.ldfrm.s2.options[2].value="Tonghua";
  49.         document.ldfrm.s2.options[0].text="please choose!";
  50.         document.ldfrm.s2.options[0].value="please choose!";
  51.     }
  52.     }
  53.     
  54.     function Go(){
  55.     if(document.ldfrm.s1.selectedIndex==0)
  56.     alert("please choose a province!");
  57.     else{
  58.     if(document.ldfrm.s2.selectedIndex==0)    
  59.     {alert("please choose a city!");
  60.     }else {
  61.         var list1 = document.ldfrm.s1;
  62.         var list2 = document.ldfrm.s2;
  63.         var theDIR = list1.options[list1.selectedIndex].value;
  64.         var theProduct = document.ldfrm.s2.options[list2.selectedIndex].value;
  65.         location.href = "" + theDIR + "/" + theProduct + ".htm";
  66.         }
  67.     }

  69.     }


  72. </script>
  73. </head>
  74. <body >
  75. <form name="ldfrm">
  76. <p><select name=s1 onchange="Change()">
  77.     <option value="please">please</option>
  78.     <option value="Liaoning">Liaoning</option>
  79.     <option value="Heilongjiang">Heilongjiang</option>    
  80.     <option value="Jilin">Jilin</option>    

  82.     </select>
  83. </p>        
  84. <p><select name=s2>
  85.     <option value="">-----</option>
  86.     <option value="">-----</option>
  87.     <option value="">-----</option>
  88.     <option value="">-----</option>
  89.     </select>
  90. </p>    
  91. <input type="button" onClick="Go()" value="GOTO Product Page" name="B1"></p>
  92.     
  93. </form>    
  94.     



  98. </body>




  103. </html>
这里要注意的是 document.ldfrm.s2.options[0].value="please choose!";语句中是options 而不是option ！！。。。。.text是显示在网页上的内容！
selectedIndex为0时 是没有值的时候！
阅读(945) | 评论(0) | 转发(0) |
0

上一篇：关于突然上不了网 的解决方法

下一篇：javascript 用户的验证

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6