Js实现简单的省市级联的效果
需要注意的是当需要动态添加项的时候一定要
先var newoption=new Option("项","值");
然后再 select.options.add(newoption);
这样才能添加进去
代码如下：
<html> <head> <script language="javascript"> function changeSever() { var newop1,newop2; //声明两个变量用来添加Option项 switch(document.form1.select1.value) //判断选择的项,注意这里是值不是所选的项,是所选项的值 { case "lt": newop1=new Option("雷霆1区","lt1"); newop2=new Option("雷霆2区","lt2"); break; case "ty": newop1=new Option("天涯1区","lt1"); newop2=new Option("天涯2区","lt2"); break; } document.form1.select2.options.length=0; //把所有的项清空 document.form1.select2.options.add(new Option("请选择相应的服务器")); document.form1.select2.options.add(newop1); //添加项 document.form1.select2.options.add(newop2); } </script> </head> <body> <form name="form1" method="post" action=""> <select name="select1" onChange="changeSever()"> //父下拉框 <option selected>请选择所在区</option> <option value="lt">雷霆</option> <option value="ty">天涯</option> </select> <p><select name="select2"> //子下拉框 <option>请选择服务器</option> </select> </form> </body> </html>
个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt
分类:
javascript脚本技术
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通