当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery中Chosen三级联动功能实例代码

jQuery中Chosen三级联动功能实例代码

2019年03月22日  | 移动技术网IT编程  | 我要评论

chosen 是一个javascript插件，它能让丑陋的、很长的select选择框变的更好看、更方便,不仅如此，它更扩大了，增长了主动筛选的功能。

本文介绍chosen联动，具体代码如下：

var addressresolve = function (options) {
  //检测用户传进来的参数是否合法
  if (!isvalid(options))
    return this;
  //默认参数
  var defaluts = {
    proid: 'divprov',
    cityid: 'divcity',
    areaid: 'divarea'
  };
  var opts = $j.extend({}, defaluts, options);//使用jquery.extend 覆盖插件默认参数
  var addressinfo = this;
  this.provinfo = $j("#" + opts.proid);//省份select对象
  this.cityinfo = $j("#" + opts.cityid);//城市select对象
  this.areainfo = $j("#" + opts.areaid);//区县select对象
  /*省份初始化方法*/
  this.provinfoinit = function () {
    var proopts = "";
    $j.each(provincejson, function (index, item) {
      proopts += "<option value='" + item.proid + "'>" + item.name + "</option>";
    });
    addressinfo.provinfo.append(proopts);
    addressinfo.provinfo.chosen(); //初始化chosen
    addressinfo.cityinfo.chosen();//初始化chosen
    addressinfo.areainfo.chosen();//初始化chosen
  };
  /*城市选择绑定方法*/
  this.selectcity = function () {
    addressinfo.cityinfo.empty();
    addressinfo.cityinfo.append("<option value=选择城市>选择城市</option>");
    addressinfo.areainfo.empty();
    addressinfo.areainfo.append("<option value=选择区县>选择区县</option>");
    if (addressinfo.provinfo.val() == "选择省份") { //选择无效时直接返回
      addressinfo.cityinfo.trigger("liszt:updated");
      addressinfo.areainfo.trigger("liszt:updated");
      return;
    }
    var provid = addressinfo.provinfo.val();//获取选择的省份值
    var cityopts = "";
    $j.each(cityjson, function (index, item) {
      if (item.proid == provid) {
        cityopts += "<option value='" + item.cityid + "'>" + item.name + "</option>";
      }
    });
    addressinfo.cityinfo.append(cityopts);
    addressinfo.cityinfo.trigger("liszt:updated");
    addressinfo.areainfo.trigger("liszt:updated");
  };
  /*区县选择绑定方法*/
  this.selectarea = function () {
    if (addressinfo.cityinfo.val() == "选择城市") return;
    addressinfo.areainfo.empty();
    addressinfo.areainfo.append("<option value=选择区县>选择区县</option>");
    var cityid = addressinfo.cityinfo.val();//获取选择的城市值
    var areaopts = "";
    $j.each(areajson, function (index, item) {
      if (item.cityid == cityid) {
        areaopts += "<option value='" + item.id + "'>" + item.disname + "</option>";
      }
    });
    addressinfo.areainfo.append(areaopts);
    addressinfo.areainfo.trigger("liszt:updated");
  };
  /*对象初始化方法*/
  this.init = function () {
    addressinfo.provinfo.append("<option value=选择省份>选择省份</option>");
    addressinfo.cityinfo.append("<option value=选择城市>选择城市</option>");
    addressinfo.areainfo.append("<option value=选择区县>选择区县</option>");
    addressinfo.provinfoinit();
    addressinfo.provinfo.bind("change", addressinfo.selectcity);
    addressinfo.cityinfo.bind("change", addressinfo.selectarea);
  }
  //私有方法，检测参数是否合法
  function isvalid(options) {
    return !options || (options && typeof options === "object") ? true : false;
  }
}

以上所述是小编给大家介绍的jquery中chosen三级联动实例代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网