Ajax做三级联动的Jquer代码

地址Ajax三级联动

遍历数据库地址表，得到数组，遍历到option下拉菜单中

从数据库获取 获取省份数据

select * from province

html结构,遍历到省份下拉菜单

<!-- 省份 -->
<select name="" id="province">
    <option value="">--请选择--省份</option>
    <?php foreach($arrDataBig as $v){?>
        <option value="<?php echo $v['provinceID'];?>"><?php echo $v['province'];?></option>
    <?php } ?>
</select>

<!-- 城市 -->
<select name="" id="city">
    <option value="">--请选择城市--</option>
</select>

<!-- 地区 -->
<select name="" id="area">
    <option value="">--请选择市区--</option>
</select>

JavaScript

//点击省份下拉菜单，触发事件，发送ajax请求，获取城市数据，动态添加到城市下拉菜单
$("#province").change(function(){
  $.getJSON("recive.php",{father:$(this).val()},function(msg){
         $("#city option[value!='']").remove();//移除城市下拉菜单数据
          $("#area option[value!='']").remove();//移除地区下拉菜单数据
         for(var i=0;i<msg.length;i++){
             $("<option value='"+msg[i].cityID+"'>"+msg[i].city+"</option>").appendTo($("#city"));
         }
  });
});

//点击城市下拉菜单，触发事件，发送ajax请求，获取地区数据，动态添加到地区下拉菜单
$("#city").change(function(){
  $.getJSON("recive1.php",{father:$(this).val()},function(msg){
         $("#area option[value!='']").remove();//移除地区下拉菜单数据
         for(var i=0;i<msg.length;i++){
             $("<option value='"+msg[i].areaID+"'>"+msg[i].area+"</option>").appendTo($("#area"));
         }
  });
});

php后台，ajax返回json数据

public function ajaxCity($father){
    //获取省份下拉数据库
    $cityArr = Db::query('select * from le_citys where father='.$father);
    return json($cityArr);
}

上一篇：PHP原生代码操作数据库

下一篇：jQuery做监听input输入值事件，发送ajax请求