效果图:

样式(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("上一级不能为空");
}
}
 

地点下来框的实现(php)的更多相关文章

  1. 给老师安排课表JAVA项目及登录窗口的实现

    实现一个安排课表的Java实验. 有以下几点要求: ①用所给的教师姓名进行课表安排 ②用所给的地点进行课表安排 ③不得有重复的课程名称出现 ④将信息写入到文件里 ⑤用窗口来进行实现 package c ...

  2. 课程登记窗口java

    设计窗口,实现课程的登记,并且将相应的数据写入文件之中.保证的是课程名称不可以重复,对于任课老师必须是在已经设定好的五位老师之中.并且上课地点也是在预先设定的范围内.窗口可以持续进行保存,数据将在判断 ...

  3. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  4. maximo弹框设置新的功能测试总结

    先介绍下弹框前的准备工作: 1.签名选项——定义系统中可授权的所有功能的唯一标识.定义签名选项是为了授权而已.定义的签名名要和相应的bean类中的方法一致. 2.签名选项中的功能实现,一般都在APPB ...

  5. jquery模拟下拉框单选框复选Select,Checkbox,Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...

  6. datagridview下拉框

    下面介绍Winform中DataGridView的DataGridViewComboBoxColumn的使用方法: //首先获取数据源 //自己建立的静态数据源,你也可以从数据库读取 DataTabl ...

  7. java下拉框,滚动条

    package com.soft.test; /** * 下拉列表.下拉框.滚动条的使用 */ import javax.swing.*; import java.awt.*; public clas ...

  8. checkbox复选框的一些深入研究与理解

    一.一开始的唠叨最近忙于开发,自淫于项目的一步步完工,心浮躁了.舍近而求远,兵家之大忌.我是不是应该着眼于眼前的东西,好好的静下心来,超过一般人的沉静与沉浸,研究最基本的东西呢?这番思考,让我找到了一 ...

  9. HTML5 number类型文本框step属性的验证机制——张鑫旭

    我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识 ...

随机推荐

  1. 解决Pycharm导入当前项目的.py文件错误

    如图所示错误,由左边导航栏可见.py文件存在: 解决办法:右键单击导包错误文件所在目录,选择[Mark Directory as]+[Sources Root] 错误已解决:

  2. Infrared-Visible Cross-Modal Person Re-Identification with an X Modality (AAAI 2020)

    Infrared-Visible Cross-Modal Person Re-Identification with an X Modality (AAAI 2020) 1. Motivation 可见 ...

  3. 2783: 【基础】小 X 玩游戏(game)

    2783: [基础]小 X 玩游戏(game) 时间限制: 1 Sec 内存限制: 64 MB 提交: 752 解决: 294 [提交] [状态] [讨论版] [命题人:ghost79] 题目描述 听 ...

  4. codeblocks 的安装与初体验

    下载 链接 安装  点击默认安装即可! 配置 自带编译器还报错!! 大多数自带编译器的codeblocks安装后无法找到编译器的解决方案 点击Settings->Compiler,找到Toolc ...

  5. 计算机网络协议,PPP协议分析

    一.基本特点 1.PPP协议是计算机网络体系中第二层(数据链路层)的协议 2.PPP帧格式是以HDLC帧格式为基础,做了很少的改动(区别:PPP是面向字符的,而HDLC是面向位的) 3.PPP协议使用 ...

  6. JAVA中基本类型和包装类之间的相互转换

    转自:https://www.imooc.com/code/2250 仅做个人学习记录之用,侵删. 基本类型和包装类之间经常需要互相转换,以 Integer 为例(其他几个包装类的操作雷同哦): 在 ...

  7. 中阶d01-- web前端 html css js bootstrap

    html 页面骨架结构css 页面优化js(脚本语言) 页面和用户互动 bootstrap 前端框架,主要实现不同设备直接打开页面时播放比例设置(全屏暂时,不要滚动条)

  8. Python Requests-学习笔记(8)-重定向与请求历史

    重定向与请求历史 默认情况下,除了 HEAD, Requests会自动处理所有重定向. 可以使用响应对象的 history 方法来追踪重定向. Response.history 是一个:class:R ...

  9. 萌新带你开车上p站(三)

    本文作者:萌新 前情回顾: 萌新带你开车上p站(一) 萌新带你开车上p站(二) 0x08 题目给的提示是和运算符优先级有关 登录后直接看源码 mistake@pwnable:~$ ls flag mi ...

  10. 谨慎使用keySet:对于HashMap的2种遍历方式比较

    HashMap存储的是键值对,所以一般情况下其遍历同List及Set应该有所不同. 但java巧妙的将HashMap的键值对作为一个整体对象(java.util.Map.Entry)进行处理,这优化了 ...