地点下来框的实现（php）
2024-09-07 13:29:31
效果图：
样式（bootstrap）：
class="selectpicker show-tick form-control"，就是多了个form-contro就行了
概念：
这里做了两个change的动作：
第一，当省的取值改变的时候，市和区的数据也会改变
第二，当市的取值改变的时候，区的数据也会改变
第一个动作在加载的时候就需要完成，也需要设置为省的改变动作。
第二个只需要设置市的改变动作即可。
根据上一级取到的数据来改变下一级的数据
数据的互动用ajax来实行，用ajax取到的数据只能在success里面有效。
代码如下：
ajax：
public function area(){
header("Content-Type: text/html; charset=UTF-8");
if(I('get.id')){
$area = M('area');
$where = array();
$where['area_name'] = I('get.id');
$id = $area -> where($where) -> field('area_id') -> find();
$where = null;
$where['parent_id'] = $id['area_id'];
$data = $area -> where($where) -> field('area_id,area_name,area_describe,parent_id') -> select();
$this->ajaxReturn($data,'json');
}
动作事件:
// area_province 省 ， area_city 市 ， area_district 区
$(document).ready(function(){
area_one('#area_province','#area_city','#area_district');
}) $('#area_province').change(function(){
// area('#area_province','#area_city');
area_one('#area_province','#area_city','#area_district');
}); $('#area_city').change(function(){
area_two('#area_city','#area_district');
});
方法：
function area_one(getSelect,serSelect,setSelect){
var a = $(getSelect).val();
var html = '';
if(a !== null && a !== '' && a !== undefined ){
$.ajax({
type:"get",
url : "{:U('FullTime/area')}",
data:{ id : a },
dataType: "json",
success: function(data){
for (var i = ; i < data.length; i++) {
if(i == ){
html += "<option value=" + "'" + data[i].area_name + "'" + " " +"selected='selected'" +">"
+ data[i].area_name +" </option>";
}
html += "<option value=" + "'" + data[i].area_name + "'" +">"
+ data[i].area_name +" </option>";
}
$(serSelect).html(html);
area_two(serSelect,setSelect)
},
error:function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
}else{
}
}
function area_two(getSelect,serSelect){
var a = $(getSelect).val();
var html = '';
if(a !== null && a !== '' && a !== undefined ){
$.ajax({
type:"get",
url : "{:U('FullTime/area')}",
data:{ id : a },
dataType: "json",
success: function(data){
for (var i = ; i < data.length; i++) {
html += "<option value=" + "'" + data[i].area_name + "'" +">"
+ data[i].area_name +" </option>";
}
$(serSelect).html(html);
},
error:function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
}else{
alert("上一级不能为空");
}
}
最新文章
- C# 类动态添加属性、方法（Z）
- gfortran编译Fortran数组问题
- [原]SQLite的学习系列之获取数据库版本二
- php中的抛出异常和捕捉特定类型的异常
- fzu 2171 防守阵地 II
- java + spring (jython\python\script) Error:SyntaxError: no viable alternative at character '\n'
- FineUI模拟树下拉列表
- javascript event bubbling and capturing (再谈一谈js的事件冒泡和事件补获，看到这篇文章加深了理解)
- J2EE进阶(八)Hibernate与延迟加载机制探究
- Python 常用模块总结
- C# 函数式编程：LINQ
- Java设计模式之四 ----- 适配器模式和桥接模式
- MATLAB：图像选取局部区域滤波（roicolor、roipoly、roifill、fspecial、roifilt2函数）
- js多个异步请求
- 20155227 2016-2017-2 《Java程序设计》第八周学习总结
- linux elasticsearch-5.1.1的安装
- redis 配置和使用(C++)
- [原创] 思维导图笔记（二）：SQL
- ubuntu 使用串口picocom
- go——通道（二）