当前位置: 首页 > 编程笔记 >

JavaScript实现级联菜单的方法

颛孙嘉石
2023-03-14
本文向大家介绍JavaScript实现级联菜单的方法,包括了JavaScript实现级联菜单的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了JavaScript实现级联菜单的方法。分享给大家供大家参考。具体实现方法如下:

<html>
<head>
 <title>test</title>
 <script type="text/javascript">
  function f()
  {
   var sel=document.getElementById("country");
   var sel2=document.getElementById("city");
   var cnarr1=new Array("bj","sh")
   var cnarr2=new Array("beijing","shanghai")
   var usaarr1=new Array("dc","ny")
   var usaarr2=new Array("Washington","NewYork")
   for(var i=sel2.length;i>=0;i--){
    sel2.removeChild(sel2.childNodes[i]);
   }
   var op=document.createElement("option");
   op.value="please";
   op.text="please";
   sel2.appendChild(op);
   if(sel.value=='USA'){
    for(i=0;i<2;i++){ 
     op.value=usaarr1[i];
     op.text=usaarr2[i];
     sel2.appendChild(op);
    }
   }
   else if(sel.value=='CN'){
    for(i=0;i<2;i++){ 
     op.value=cnarr1[i];
     op.text=cnarr2[i];
     sel2.appendChild(op);
    }
   }
  }
 </script>
</head>
<body>
<select onchange="f()" id='country'>
 <option >please</option>
 <option value='USA'>America</option>
 <option value='CN'>China</option>
</select>
<select id='city'>
 <option >please</option>
</select>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍javascript实现多级联动下拉菜单的方法,包括了javascript实现多级联动下拉菜单的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现多级联动下拉菜单的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍javascript实现二级级联菜单的简单制作,包括了javascript实现二级级联菜单的简单制作的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现二级级联菜单的简单制作方法。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 希望本文所述对大家学习javascript程序设计有所帮助。

  • 本文向大家介绍javascript实现无限级select联动菜单,包括了javascript实现无限级select联动菜单的使用技巧和注意事项,需要的朋友参考一下 代码很简单,这里主要是给大家推荐一下本代码的实现思路,别具一格。 奉上代码:

  • 本文向大家介绍ajax级联菜单实现方法实例分析,包括了ajax级联菜单实现方法实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了ajax级联菜单实现方法。分享给大家供大家参考,具体如下: 效果如下: 选择第一项,第二项、第三项的内容跟着改变。 选择第二项,第三项的内容跟着改变。 第三项则不影响第一项和第二项。 有几点值得提: 1.html到底是前台拼接还是后台拼接。 我选择的是前台拼

  • 本文向大家介绍js实现城市级联菜单的2种方法,包括了js实现城市级联菜单的2种方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现城市级联菜单的具体代码,供大家参考,具体内容如下 方法一:用switch方法判断。 方法二:用if进行判断。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于Javascript实现二级联动菜单效果,包括了基于Javascript实现二级联动菜单效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码,具体内容如下 效果图如下: 具体实现步骤如下: 1.所用js代码如下: 2.body中的代码如下: 第二个效果: 1.利用javascript来实现鼠标经过图片放大,鼠标移出图