下拉列表 级联菜单操作（js代码的级联操作）

最新推荐文章于 2024-04-28 13:37:45 发布
最新推荐文章于 2024-04-28 13:37:45 发布
阅读量2.7k 收藏 5
点赞数 1
分类专栏： js版的级联操作 文章标签： 下拉列表 级联菜单操作 js版
  1. <script type="text/javascript">  
  2.     function selcity(){  
  3.         var arr = [["--选择城市--"],["海定区","东城区","西城区","朝阳区"],["济南","青岛","日照","威海"],  
  4.                    ["长沙","郴州","岳阳","株洲"],["广州","深圳","惠州","东莞"]];  
  5.         var index = document.getElementById("selID").selectedIndex;  
  6.         var subNode = document.getElementById("subID");  
  7.         var citys = arr[index];        
  8.           
  9.         subNode.options.length = 0;   //清空之前选项  
  10.         for(var x=0;x<citys.length;x++){  
  11.             var optNode = document.createElement("option");  
  12.             optNode.innerText = citys[x];  
  13.             subNode.appendChild(optNode);  //选择添加到子选项中  
  14.         }  
  15.     }  
  16. </script>  
  17. <style type="text/css">   
  18.       
  19. </style>  
  20. </head>  
  21. <body>  
  22.     <select id="selID" onchange="selcity()">  
  23.         <option>--选择省市--</option>  
  24.         <option>北京</option>  
  25.         <option>山东</option>  
  26.         <option>湖南</option>  
  27.         <option>广东</option>  
  28.     </select>  
  29.       
  30.     <select id="subID">  
  31.         <option>--选择城市--</option>  
  32.     </select>  
  33. </body> 
job_csdn
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
级联下拉列表框
tianjun2012的专栏
12-09 3061
还是老规矩，先来看下效果图： 图1： 图2： 图3： 图4： 这就省份等常见的级联下拉列表框的原型；下面来看看代码的构成 标题 body{ font-size: 13px; } .clsInit{ width: 435px; height: 35px; line-height:
javascript级联下拉列表实例代码(自写)
10-27
javascript下拉菜单想必大家在浏览网页的时候都会看到吧，已不是那么陌生了，本文介绍使用javascript实现级联下拉列表实例，感兴趣的朋友可以参考下哈，希望对你有所帮助
ajax 四级级联菜单（jquery实现）
热门推荐
天将降大任于是人
09-26 1万+
页面：＜html＞＜head＞＜script type=text/javascript src=jquery.js＞＜/script＞＜script type=text/javascript＞//js代码1＜script＞＜body＞＜table＞＜tr＞＜td＞级联菜单＜/td＞＜td＞＜select name=city class=amenu＞＜option value=
JavaScript实现select下拉菜单省份和城市的级联菜单
syy的博客
11-19 2956
使用JavaScript实现数组与select标签结合使用对省份及对应的城市的显示
js实现简单的级联下拉列表
最新发布
weixin_51609337的博客
04-28 280
【代码】js实现简单的级联下拉列表。
js级联下拉列表
xiesuntian的专栏
03-22 181
在看例子前首先要对这两个对象有认识： 1) Select对象 属性 a. selectedIndex: 用户选择的选项的下标,下标从0开始。 b. length: 获取戒者设置选项的个数。 c. options: 返回一个数组，数组元素是Option对象。 2) Option对象 属性 a. text: 选项的文本内容 b. value: 选项的值 c. selecte...
html 级联动态下拉框,JS(JQuery)实现动态三级级联下拉列表效果
weixin_36123285的博客
06-03 617
实现效果数据结构样式，采用json格式HTML结构仓库名称：请选择仓库专业名称：请选择专业项目名称：请选择项目效果一：需要手动一级一级点开var data_select = [];//获取级联需要的json数据$.ajax({type: "post",url: "/admin/AdminHandler.ashx",data: { "operation": "GetCKZYXMList" },suc...
《使用面向对象的方式封装js级联下拉菜单列表的实例教程》源码
04-20
本文件属于文章《使用面向对象的方式封装js级联下拉菜单列表的实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中cascadeMenu.js文件封装了级联菜单插件，可直接引入到html文件中使用。
ASP动态级联菜单实现代码
01-20
这个例子展示了ASP结合JavaScript如何实现动态交互的级联菜单，同时利用了ADO（ActiveX Data Objects）进行数据库操作。这种技术在早期Web开发中非常常见，但现在可能已经被更现代的框架如jQuery或AJAX取代，以提供...
微信小程序基于picker实现级联菜单
10-17
在微信小程序开发中，创建交互式的用户界面是关键任务之一，级联菜单（Cascading Menu）在这种场景下尤其有用，因为它能有效地呈现层次结构的数据。本教程将讲解如何使用微信小程序内置的`picker`组件来实现级联菜单...
Bootstrap每天必学之级联下拉菜单
09-02
然而，对于级联菜单，我们需要额外的逻辑来处理父级菜单选择后子级菜单的更新。 在提供的示例中，`yunm.combox.js`是一个自定义的JavaScript组件，用于实现级联下拉菜单的动态加载。它通过在`<select>`元素上添加...
js实现联动菜单
11-08
用js实现联动菜单省份功能，实现网页上注册时选择省份
js实现二级菜单联动
12-26
js实现的二级菜单联动。选择的是省市联动
select级联下拉列表
06-19
select级联下拉列表 JS实多级联动下拉菜单类,简单实现省市区联动菜单! 无刷新级联下拉框的jquery代码 jQuery+HTML5实现的带链接箭头的多级下拉菜单
html5 级联下拉列表,用js+html5实现二级联动省份下拉菜单
weixin_33045071的博客
06-03 759
二级联动省份下拉框var provinces = ['请选择城市','湖北省','湖南省'];var city1 = ['武汉市','荆州市','襄阳市'];var city2 = ['长沙市','岳阳市','湘潭市'];//生成有数据的省的下拉框document.write("");for(var i = 0;idocument.write(""+provinces[i]+"");}docume...
js 实现级联下拉菜单
jshyzx1999的博客
05-13 696
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--当用户选定或取消选定时，触发onchange--> 省：<select onchange="change()" id="pro"> <opt...
js下拉列表框的联动事件
TianGaojie123abc的专栏
10-30 5619
对二维数组的实际应用 html> head>     title>title>     scriptlanguage="javascript"type="text/javascript">         //定义 城市 数据数组         cityArray = new Array();         cityArray
html5 级联下拉列表,JQuery实现级联下拉框效果实例讲解
weixin_39856630的博客
06-03 342
用JQuery和select来实现汽车厂商和汽车类型的联动，参考过程如下效果图：逻辑分析图：html代码：级联下拉框效果汽车厂商：请选择汽车厂商宝马奥迪大众 汽车类型：css代码：.car {text-align:center;}.cartype{display:none;}js代码：$(document).ready(function(){//找到下拉框var carnameSelect ...
实现基于AJAX的级联下拉菜单 完整代码
05-20
下面是一个基于AJAX的级联下拉菜单的完整代码示例： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>基于AJAX的级联下拉菜单</title> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> $(document).ready(function(){ $("#province").change(function(){ var province_id = $(this).val(); $.ajax({ type: "POST", url: "get_city.php", data: {province_id: province_id}, dataType: "json", success: function(data){ var city_html = ""; $.each(data, function(i, city){ city_html += "<option value='" + city.id + "'>" + city.name + "</option>"; }); $("#city").html(city_html); } }); }); }); </script> </head> <body> <div> <select id="province"> <option value="">请选择省份</option> <option value="1">广东省</option> <option value="2">北京市</option> <option value="3">上海市</option> </select> </div> <div> <select id="city"> <option value="">请选择城市</option> </select> </div> </body> </html> ``` PHP代码（get_city.php）： ```php <?php header('Content-Type: application/json; charset=utf-8'); $province_id = $_POST['province_id']; if($province_id == 1){ $city_list = array( array('id' => 1, 'name' => '广州市'), array('id' => 2, 'name' => '深圳市'), array('id' => 3, 'name' => '珠海市') ); }elseif($province_id == 2){ $city_list = array( array('id' => 4, 'name' => '北京市') ); }elseif($province_id == 3){ $city_list = array( array('id' => 5, 'name' => '上海市') ); }else{ $city_list = array(); } echo json_encode($city_list); ?> ``` 这段代码实现了一个基于AJAX的级联下拉菜单，当用户选择一个省份时，通过AJAX请求PHP脚本get_city.php，获取该省份下的城市列表，并将城市列表渲染到第二个下拉菜单中，从而实现了级联效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值