JQ和JSON省市区练习

导入JQ和JSON文件

<head><meta charset="UTF-8"><title>省市区练习</title><script src="jquery-3.6.0.min.js"></script><script src="addr.js"></script>
</head>

body代码

<body>
//省份下拉
<select name="" id="province"><option disabled selected>请选择</option>
</select>
//市区下拉
<select name="" id="city"><option disabled selected>请选择</option>
</select>
//区县下拉
<select name="" id="county"><option disabled selected>请选择</option>
</select>
</body>

JQ代码


<script>//点击省份事件$("#province").click(function () {//遍历temp 获取省份$.each(temp, function (i, d) {//赋值 获取到的一级目录  code编号  label 名字var newOP = "<option value='" + d.code + "'>" + d.label + "</option>";//在省份列表后边添加省份$("#province").append(newOP);// console.log(newOP);});});//省份改变$("#province").change(function () {//对之前值进行覆盖$("#city").html("<option disabled selected>请选择</option>");$("#county").html("<option disabled selected>请选择</option>");//获取省份下拉框的valuevar province = $(this).val();//获取省份$.each(temp, function (i, d) {//判断下拉框的value值 和 遍历的code值是否一样if (province == d.code) {//获取市$.each(d.children, function (i, d) {var newOP = "<option value='" + d.code + "'>" + d.label + "</option>";//添加城市$("#city").append(newOP);});}});});//市 改变$("#city").change(function () {//覆盖区县$("#county").html("<option disabled selected>请选择</option>");//市区下拉框var cityVal = $(this).val();//省下拉框var proVal = $("#province").val();//获取省份$.each(temp, function (i, d) {//判断选中的省和遍历的省是否一样if (d.code == proVal) {//获取市$.each(d.children, function (i, d) {//判断选中的市 是否和下拉框的市一样if (cityVal == d.code) {//获取区县$.each(d.children, function (i, d) {var newOP = "<option value='" + d.code + "'>" + d.label + "</option>";//添加区县$("#county").append(newOP);});}});}})});
</script>

JSON文件

temp = [{"code": "110000","label": "北京市","children": [{"code": "110100","label": "北京市","children": [{"code": "110101","label": "东城区"},{"code": "110102","label": "西城区"},{"code": "110105","label": "朝阳区"},{"code": "110106","label": "丰台区"},{"code": "110107","label": "石景山区"},{"code": "110108","label": "海淀区"},{"code": "110109","label": "门头沟区"},{"code": "110111","label": "房山区"},{"code": "110112","label": "通州区"},{"code": "110113","label": "顺义区"},{"code": "110114","label": "昌平区"},{"code": "110115","label": "大兴区"},{"code": "110116","label": "怀柔区"},{"code": "110117","label": "平谷区"},{"code": "110228","label": "密云区"},{"code": "110229","label": "延庆区"}]}]},{"code": "120000","label": "天津市","children": [{"code": "120100","label": "天津市","children": [{"code": "120101","label": "和平区"},{"code": "120102","label": "河东区"},{"code": "120103","label": "河西区"},{"code": "120104","label": "南开区"},{"code": "120105","label": "河北区"},{"code": "120106","label": "红桥区"},{"code": "120110","label": "东丽区"},{"code": "120111","label": "西青区"},{"code": "120112","label": "津南区"},{"code": "120113","label": "北辰区"},{"code": "120114","label": "武清区"},{"code": "120115","label": "宝坻区"},{"code": "120116","label": "滨海新区"},{"code": "120221","label": "宁河区"},{"code": "120223","label": "静海区"},{"code": "120225","label": "蓟州区"}]}]},]

JQ和JSON省市区练习相关推荐

【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显
目录一:准备工作二:json文件数据例1 例2 三:先做个按钮做弹窗显示四:使用组件五:用到的变量六:初始化数据七:数据变更时的方法八:点击确认时的方法九:数据的回填这是选中效果 ...
uniapp 用 uView 组件库中的u-picker 实现地区的省-市-区三级联动
组件的引入就不多赘述了直接看使用方法地址我是引入的json文件数据结构大概是这个样子例1 例2 1,先做个按钮做弹窗显示 <u-cell :border="true" ...
如何在命令行中使用jq将JSON转换为CSV
by Knut Melvær 通过纳特·梅尔瓦如何在命令行中使用jq将JSON转换为CSV (How to transform JSON to CSV using jq in the command ...
ReactNative中国省-市-区WheelPicker组件
github地址兼容IOS和安卓,中国省-市-区WheelPicker选择器的RN组件. propTypes isVisible: PropTypes.bool, selectedProvince: ...
Shell脚本使用jq解析json
安装Homebrew: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/maste ...
国,省,市,区(县)(四级联动)
国,省,市,区(县)(四级联动) 一, 技术栈:Vue + Quasar + Vuelidate + axios 二, 具体代码(表单验证规则Vuelidate上篇文章已经写过了,这里就不多做介绍咯) ...
jq遍历json/数组
$(function() {//jq遍历json/数组var json =[{code:"101",val:"1111"},{code:"102&qu ...
shell - jq 处理json
Useful Link: offical manual link:jq Manual (development version) 中文版:jq 中文手册(v1.5) | jq 中文手册常用操作:jq ...
shell jq处理json字符串
shell jq处理json字符串 1.1 工具介绍自己用shell处理json字符串的时候,开发输入格式的不通会导致解析字符串有问题,所以这里用到了jq工具 jq 是一款命令行下处理 JSON 数 ...

JQ和JSON省市区练习

JQ和JSON省市区练习相关推荐

最新文章

热门文章

JQ和JSON省 市 区练习

JQ和JSON省 市 区练习相关推荐

最新文章

热门文章

JQ和JSON省市区练习

JQ和JSON省市区练习相关推荐