一张表 怎么 jquery省市区三级联动

Posted 2023-05-15

参考技术A jquery+ajax就可以搞定的
id，菜单名称，parentid(父级id)，排序，描述
1 河北省 0
2 石家庄 1
3 东城区 2
4 西城区 2
5 廊坊 1
6 河南省 0
接下来使用 jquery + ajax来实现联动
第一级：parentid = 0 的所有菜单
第二级： 一级菜单的onchange()事件根据选中的value 比如：value=1 使用ajax获取 parentid=1的菜单，
前台代码：
<select onchange="change_1()" name="sele_1" id="sele_1">
<option value="1" >河北省</option>
<option value="2" >河南省</option>
</select>
<select onchange="change_2()" name="sele_2" id="sele_2">
<option value="2" >石家庄</option>
<option value="5" >廊坊</option>
</select>
<script>
function change_1()
var strvalue=$("#sele_1").val();
$.ajax(
type:'post',
url: "php函数 select_ajax_1()",
data:"specialty_1":strvalue,
dataType: "json",
success: function (data)
console.log(data); //控制台输出
$('#sele_2').html(""); //清空
//读取json数据
for (var i=0;i<data.length;i++)
// 数据库的联动菜单ID 菜单名
$('#sele_2').append("<option value='"+data[i].linkageid+"' >"+data[i].name+"</option>");

,
error:function(data)
alert("异常！");

)

</script>

后台php代码：
function select_ajax_1()
//获取ajax传来的 specialty_1
$valueid = intval($_POST['specialty_1']);
/*
查询 parentid=$valueid的菜单
*/
//返回json数据
echo json_encode(查询结果数组);
本回答被提问者和网友采纳 参考技术B 　if (myreader.HasRows)
　　
　　MessageBox.Show(myreader.GetString("email") );
　　
　　
　　myreader.Close();
　　mycon.Close();

省市区三级菜单联动插件

前言

这里分享一个博主写的省市区三级菜单联动插件 — jQuery-Citys，此插件中所有省市区数据均为国家行政区划代码，保证数据真实可靠，插件可以根据默认地区代码或地区名称进行值的初始化操作。

线上演示地址：https://yangyunhe369.github.io/jQuery-Citysgithub地址：https://github.com/yangyunhe369/jQuery-Citys备用地址ps：github地址有代码演示，以及插件源码可供参考，线上演示地址可供预览。演示截图（查看演示效果请点击上方链接）：

插件逻辑

这个插件的逻辑主要是根据区划代码来进行省市区的筛选以及分类，因为区划代码的特殊排序博主在里面使用了一些正则来划分不同的省份以及地区，然后通过对三级菜单绑定不同的事件来响应省市区变化的联动效果。

源码解析

这里只展示部分相关源码，更多源码可以访问博主的github地址进行下载查看。
首先是定义各项参数：

var _options = $.extend({
    url : 'js/jquery-citys.json',         //省市区json数据地址
    patternPro : /\d{2}0000/,             //初始化正则匹配省数据
    patternCity : /1101\d{2}/,            //初始化正则匹配市数据
    type : 'code',                        //下拉框值的类型,code行政区划代码,name地名
    code: 0,                              //地区编码
    province : '',                        //省份(省级),可以为地区编码或者名称
    city : '',                            //城市(地级),可以为地区编码或者名称
    area : '',                            //地区(县区级),可以为地区编码或者名
    selState : 0,                         //联动级别判断值，二级联动状态值为0，三级为1
    selProvince : "province",             //省份、直辖市列表框name
    selCity : "city",                     //城市、区列表框name
    selArea : "area",                     //区、县列表框name
}, options);
var proHtml = '',                         //省份html数据
    cityHtml = '',                        //城市html数据
    areaHtml = '',                        //地区html数据
    _this = $(this),                      //指向调用插件对象
    citys = '',                           //省市区json数据
    patternPro = _options.patternPro,     //初始化正则匹配省数据
    patternCity = _options.patternCity,   //初始化正则匹配市数据
    type = _options.type,                 //下拉框值的类型,code行政区划代码,name地名
    code = _options.code,                 //地区编码
    province = _options.province,         //省份(省级),可以为地区编码或者名称
    city = _options.city,                 //城市(地级),可以为地区编码或者名称
    area = _options.area,                 //地区(县区级),可以为地区编码或者名
    selState = _options.selState,         //联动级别判断值，二级联动状态值为0，三级为1
    $selProvince =  _this.find('select[name="'+ _options.selProvince +'"]'),  //省份、直辖市列表框name
    $selCity =  _this.find('select[name="'+ _options.selCity +'"]'),          //城市、区列表框name
    $selArea = _this.find('select[name="'+ _options.selArea +'"]');           //区、县列表框name

获取省市区json数据：

$.getJSON(_options.url,function(data){
  citys = data;
  //执行初始化命令
  init();
})

初始化命令：

var init = function(){
  //初始化默认数据                 
  proHtml = "<option> - 请选择 - </option>";
  cityHtml = "<option> - 请选择 - </option>";                  
  for(var i in citys){
    if(patternPro.test(i)){ //添加一级列表数据
      proHtml += "<option value='"+(type=="code"?i:citys[i])+"' data-code='"+ i +"'>"+ citys[i] +"</option>";
    }
  }
  //渲染省份一级列表
  $selProvince.html(proHtml);
  //渲染城市二级列表
  $selCity.html(cityHtml);
  //默认隐藏区三级列表
  $selArea.hide();
  //填写地区编码时，利用编码定位
  if(type == 'code' && code){
    var c = code - code%1e4;
    province = c;
    c = code - (code%1e4 ? code%1e2 : code);
    city = c;
    c = code%1e2 ? code : 0;
    area = c;
  }
  //添加默认初始值
  $selProvince.find('option').each(function(){
    if(type == 'code' && province != ''){
      if(province == $(this).data('code')){
        $(this).attr('selected',true);
        changeProvince($(this).data('code'));
      }
    }else if(type == 'name' && province != ''){
      if(province == $(this).val()){
        $(this).attr('selected',true);
        changeProvince($(this).data('code'));
      }
    }
  })
  $selCity.find('option').each(function(){
    if(type == 'code' && city != ''){
      if(city == $(this).data('code')){
        $(this).attr('selected',true);
        changeCity($(this).data('code'));
      }
    }else if(type == 'name' && city != ''){
      if(city == $(this).val()){
        $(this).attr('selected',true);
        changeCity($(this).data('code'));
      }
    }
  })
  $selArea.find('option').each(function(){ 
    //三级联动时，匹配对应地区
    if(selState == 1){ 
      if(type == 'code' && area != ''){
        if(area == $(this).data('code')){
          $(this).attr('selected',true);
        }
      }else if(type == 'name' && area != ''){
        if(area == $(this).val()){
          $(this).attr('selected',true);
        }
      }
    }
  })
}

作者： 弦云孤赫 原文链接： http://www.yangyunhe.me/2017/jquery-citys/
本文可以转载，但务必注明原作者和原出处。