JavaScript实现级联菜单的方法

前端技术 2023/09/05 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/14324

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案