不操作数据库,js解析json三级联动
来源:互联网 发布:cd windows syswow64 编辑:程序博客网 时间:2024/06/07 06:14
1.后台转换成json写入js文件
public function index()
{
// region_type 1 省份 2 城市 3 区县
// 获取省 一维数组
$arr1 = DB::table('region')->where('region_type',1)->get();
foreach($arr1 as $k => $v){
if($v->parent_id == 1){
$province[$v->region_id] = $v->region_name;
}
}
// print_R($province);die;
//获取城市
$arr2 = DB::table('region')->where('region_type',2)->get();
foreach($arr2 as $k => $v){
foreach($province as $kk => $vv){
// $a[$v->region_id] = $v->region_name;
if($v->parent_id == $kk){
$city[$kk][$v->region_id] = $v->region_name;
$cityId[$v->region_id] = $v->region_id;
}
}
}
// print_r($city);die;
//获取县城
$arr3 = DB::table('region')->where('region_type',3)->get();
foreach($arr3 as $k => $v){
foreach($cityId as $kk => $vv){
if($v->parent_id == $vv){
$area[$kk][$v->region_id] = $v->region_name;
}
}
}
// print_R($area);die;
$country['province'] = $province;
$country['city'] = $city;
$country['area'] = $area;
// print_R($country);die;
$filename = "area.js";
file_put_contents($filename,"var json=".json_encode($country));
return view('admin/Area');
}
2.前台html代码
省份<select id="province" onchange="province(this)">
<option value="">--请选择--</option>
</select>
城市<select id="city" onchange="city(this)">
<option value="">--请选择--</option>
</select>
区/县<select id="area">
<option value="">--请选择--</option>
</select>
3.js代码
<script src="{{URL::asset('/')}}area.js"></script><script src="js/jQuery.js"></script>
<script>
var json = eval(json);
var str = '<option value="">--请选择--</option>';
for(i in json.province){
str += '<option value="'+i+'">'+json.province[i]+'</option>';
}
$("#province").html(str);
$("#city").html('<option value="">--请选择--</option>');
//根据省份查询出城市
function province(p_id){
var p_id = $(p_id).val();
var st = '<option value="">--请选择--</option>';
for( a in json.city[p_id]){
st += '<option value="'+a+'">'+json.city[p_id][a]+'</option>';
}
$("#city").html(st);
$("#area").html('<option value="">--请选择--</option>');
}
// 根据城市查询出区/县
function city(c_id){
var c_id = $(c_id).val();
var sr = '<option value="">--请选择--</option>';
for( a in json.area[c_id]){
sr += '<option value="'+a+'">'+json.area[c_id][a]+'</option>';
}
$("#area").html(sr);
}
</script>
- 不操作数据库,js解析json三级联动
- 不操作数据库,js解析json三级联动
- JS+JSON 省市区 三级联动 SELECT
- JS+JSON 省市区 三级联动 SELECT
- asp js三级联动菜单,数据库版本
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- json+jquery 三级联动
- 省市区三级联动json
- JSON+JS实现省市县三级联动下拉框
- vue省市区三级联动mysql,js/json,html/jsp
- 不用json文件不用数据库存储实现三级联动
- JS 三级联动菜单
- JS三级联动选单
- JS三级联动
- js省市区三级联动
- js三级联动
- rhce学习第二天
- LeetCode—365. Water and Jug Problem
- ps抠图方法
- php 读取表结构自动生成php类
- input标签动态属性执行的函数
- 不操作数据库,js解析json三级联动
- Docker实战(十二):Docker安装ElasticSearch集群环境
- 实时的分布式sphinx索引配置及使用方法总结
- Docker实战(十一):Docker安装ELK环境(二)
- Spring的注入方式
- 一周stackoverflow热门问题选登:“==” 和 “!=” 相互依存吗?
- 01. ubuntu 16.04 LTS 双系统安装之系统盘制作
- rhce学习第三天
- Hikari java数据库连接池实战