JavaScript实现级联菜单的方法

2019-12-18,,,

本文实例讲述了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实现二级级联菜单的简单制作
  • js实现网页多级级联菜单代码
  • js出生日期 年月日级联菜单示例代码
  • 前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
  • js 使用form表单select类实现级联菜单效果
  • ExtJS 设置级联菜单的默认值
  • Ajax+Json 级联菜单实现代码
  • 用php+javascript实现二级级联菜单的制作
  • js实现的全国省市二级联动下拉选择菜单完整实例
  • js实现城市级联菜单的2种方法

《JavaScript实现级联菜单的方法.doc》

下载本文的Word格式文档,以方便收藏与打印。