基于数组级联列表

最新推荐文章于 2022-05-06 17:54:47 发布
最新推荐文章于 2022-05-06 17:54:47 发布
阅读量551 收藏
点赞数
分类专栏： 数据循环
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daimomo000/article/details/54728557
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>基于数组级联列表</title>
    <script type="text/javascript">
		// 采用JSON格式来存储相应的数据和编码
		var proJSON={"1":"广东省","2":"湖北省"};
		var cityJSON={"1":{'020':'广州','0755':'深圳','0756':'珠海'},'2':{'027':'武汉','0710':'襄樊','0715':'赤壁'}}
		window.οnlοad=function(){
			var province=document.getElementById("province");
			for(temp in proJSON){
				province.add(new Option(proJSON[temp],temp));	
			}
		}	
		function setCity(){
			// 只要触发了此事件,则二级菜单必须还原
			var city=document.getElementById('city');
			city.options.length=1;
			// 获取被选中省会的值
			var val=document.getElementById("province").value;
			console.info("cityJSON:" + cityJSON[val]);
			// 如果没有选择任何省会信息则直接返回
			if(!cityJSON[val]) return;
			// 通过选中的值获取二级菜单的json数据
		    var sonJSON=cityJSON[val];
			for(temp in sonJSON){
				city.add(new Option(sonJSON[temp],temp));	
			}
		}
    </script>
</head>
<body>
   <!-- 数据的三种存储方式: 
        	1: 数据库: 安全高、可以存储有结构但是耗资源
            2: properties: 存储非敏感数据,且Key value格式,省资源的
            3: XML: 存储非敏感数据,且支持有结构 目前一般用于配置文件
            4: 硬编码: 主要存储非敏感数据,且不改不的数据
   -->
   <select id="province" onChange="setCity()">
   		<option value="">--选择省会--</option>
   </select>
   <select id="city">
   		<option value="">--选择城市--</option>
   </select>
</body>
</html>

lucky芬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
级联下拉列表工具类，js实现
07-17
本文将深入分析一个名为`ComboSelectFactory`的JavaScript类库，该库用于创建基于JSON数据源的级联下拉列表。 #### 核心概念与功能 1. **级联下拉列表**: 由多个下拉列表组成，用户在选择第一个下拉列表的选项后，...
微信小程序基于picker实现级联菜单
10-17
数据结构方面，定义了一个`data`对象，其中包含了品牌列表`brands`、配件分类对象数组`objectArray`、当前选中的品牌索引`brandindex`以及当前选中的配件类别索引`index1`。`objectArray`中每个对象包含了品牌名、ID...
基于数组的级联列表
10-23 174
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <...
数组的级联和分割
weixin_45989161的博客
07-21 352
import numpy as np 级联 concatenate 方法 需要将多个数组拼接成一个数组成为一个元组以参数的形式传入 concatenate可以指定数组的拼接方向，默认是0轴也就是垂直方向拼接，可以通过修改axis参数，让数组水平方向拼接 concatenate 对拼接的数组的形状有一定的要求----如果是水平方向拼接 需要行数相等--如果是垂直方向拼接 则需要列数相等 a = np.random.randint(2, 10, size=(2,4)) b = np.random.randi
js用数组实现级联列表
妈的小可爱
04-18 2340
菜单选择 菜品类别： //定义菜品类别和数组 var menuType = ["凉菜","热菜","主食"]; var menu = [ ["拍黄瓜","泡椒凤爪","水果沙拉"], ["宫保鸡丁","红烧肉","木须肉"], ["水饺"
JavaScript实战-基于数组的级联列表实现
xiuyang_song的博客
07-29 643
JavaScript实战-基于数组的级联列表实现 全部代码如下： 效果如下：
JavaScript级联链表
知而好问，然后能才
05-06 1722
级联链表：数据驱动
基于JQuery实现的Select级联
10-26
在网页开发中，Select级联是一种常见的交互设计，它指的是两个或多个下拉选择框（Select元素）之间存在依赖关系，当用户在一个下拉框中选择一个选项时，另一个下拉框的内容会根据所选选项自动更新。这种功能在很多...
基于JSON级联查询(修改)省 市 区
09-12
2. **数据结构优化**：可以使用数组而非嵌套的对象结构，以便于遍历和查询，如使用如下格式： ```json [ { "id": "province1", "cities": [{"id": "city1", "districts": [{"id": "district1"}, {"id": "district...
基于Bootstrap的级联选择树
05-27
在这个"基于Bootstrap的级联选择树"项目中，我们主要关注的是如何利用Bootstrap的特性来实现一个具有级联选择功能的树视图。级联选择允许用户在多个相关选项间进行递进式的选择，这样的交互方式常见于层次结构数据的...
超漂亮的基于jquery的H5省市区县三级地区级联选择菜单，适合wap、html5页面使用
10-16
超漂亮的基于jquery的H5省市区县三级地区级联选择菜单，适合wap、html5页面使用。无用代码全部剥离干净。界面漂亮、兼容性好。
UI最棒的 仿美团的城市定位选择页面
04-15
UI最棒的 仿美团的城市定位选择页面 信不信由你 LocateCity仿美团城市选择界面
JS零基础入门——06（级联列表）
m0_65410668的博客
04-22 330
JS——级联列表
js 级联select
南方有岛
10-17 484
参考：http://www.codefans.net/jscss/code/3255.shtml    做了修改
级联表（个人理解，不一定对）
qq_44778404的博客
08-18 446
级联表相当于原表的附加表，原表是一个平常见到的正规的表，字段统一，有规则，级联表就是记住原表中的特殊信息，如qq号，不是每个人都有，所以有的就加到级联表，像身份证，每个人都有的且常用的数据就存到原表中 ...
php多数组关联
zhaoliang831214的专栏
09-24 506
$product_list = array(     1 => array("id" => 1, "name" => "aaaaaa", "classid" => 23, "createtime" => '2015-9-9 12:52', 'flag' => 234),     2 => array("id" => 1, "name" => "aaaaaa", "classid" => 21,
PHP关联数组的10个操作技巧
热门推荐
puddingpp的博客
12-21 1万+
PHP 数组 数组是特殊的变量，它可以同时保存一个以上的值，数组能够在单一变量名中存储许多值，并且您能够通过引用下标号来访问某个值。 在 PHP 中创建数组 在 PHP 中， array() 函数用于创建数组： array(); 在 PHP 中，有三种数组类型： 索引数组 - 带有数字索引的数组关联数组 - 带有指定键的数组多维数组 - 包含一个或多个数组的数组
数据操作之numpy模块2——数组的切片、变形、级联、拆分与数学计算
时生的博客
02-28 951
记录了数组的切片操作、数组的变形操作reshape、数组的级联操作concatenate和vstack、hstack、数组的拆分操作split等的基本使用方法
vue省市区三联动下拉选择组件的实现
ken_ding的博客
01-22 6498
我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用 我们今天来实现一个 利用vuejs开发的 省市区三联动的组件 CitySelect.vue组件 首先来看一下最终的效果(没有写太多的样式…) 组件所需要的省市区的JSON数据(已经封装为commonjs模块了):
jquary实现基于AJAX的级联下拉菜单
最新发布
05-19
下面是一个基于AJAX和jQuery实现的级联下拉菜单的示例代码： HTML代码： ```html <label for="province">省份：</label> <select id="province" name="province"> <option value="">请选择</option> <option value="1">北京市</option> <option value="2">上海市</option> <option value="3">广东省</option> </select> <label for="city">城市：</label> <select id="city" name="city"> <option value="">请选择</option> </select> ``` JS代码： ```javascript $(function(){ $("#province").change(function(){ var provinceId = $(this).val(); if(provinceId){ $.ajax({ url: "/getCity", type: "GET", data: {"provinceId": provinceId}, dataType: "json", success: function(data){ $("#city").empty().append("<option value=''>请选择</option>"); $.each(data, function(index, item){ $("#city").append("<option value='"+ item.id +"'>"+ item.name +"</option>"); }); } }); }else{ $("#city").empty().append("<option value=''>请选择</option>"); } }); }); ``` 在上面的代码中，我们首先定义了两个下拉菜单，其中省份下拉菜单有三个选项，城市下拉菜单一开始没有选项。当我们选择省份后，页面会向服务器发送一个AJAX请求，获取该省份下的所有城市列表，并将城市列表添加到城市下拉菜单中。如果我们重新选择了其他省份，则会更新城市下拉菜单的选项。如果我们选择了“请选择”选项，则城市下拉菜单中不会显示任何选项。 需要注意的是，上面的代码只是一个示例，实际的ajax请求需要根据自己的后台接口进行调整。同时，需要保证城市列表的返回数据格式为JSON数组，每个城市对象至少包含一个id和一个name属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值