1. 云栖社区>
  2. >
  3. 正文

JavaScript实现级联菜单的方法_javascript技巧

作者:用户 来源:互联网 时间:2016-06-29 16:11:22

javascript级联菜单

JavaScript实现级联菜单的方法_javascript技巧 - 摘要: 本文讲的是JavaScript实现级联菜单的方法_javascript技巧, 本文实例讲述了JavaScript实现级联菜单的方法。分享给大家供大家参考。具体实现方法如下: <html> <head> <title>test</title> <scrip

本文实例讲述了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级联菜单、jquery实现级联菜单、js实现级联菜单、级联菜单循环如何实现、级联菜单 怎么实现,以便于您获取更多的相关知识。