一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2017-06-03 编辑:简简单单 来源:一聚教程网

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

本文介绍Chosen联动,具体代码如下:

 

 代码如下复制代码

varaddressResolve =function(options) {

  //检测用户传进来的参数是否合法

  if(!isValid(options))

    returnthis;

  //默认参数

  vardefaluts = {

    proId:'divProv',

    cityId:'divCity',

    areaId:'divArea'

  };

  varopts = $j.extend({}, defaluts, options);//使用jQuery.extend 覆盖插件默认参数

  varaddressInfo =this;

  this.provInfo = $j("#"+ opts.proId);//省份select对象

  this.cityInfo = $j("#"+ opts.cityId);//城市select对象

  this.areaInfo = $j("#"+ opts.areaId);//区县select对象

  /*省份初始化方法*/

  this.provInfoInit =function() {

    varproOpts ="";

    $j.each(provinceJson,function(index, item) {

      proOpts +="

    });

    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("

    addressInfo.areaInfo.empty();

    addressInfo.areaInfo.append("

    if(addressInfo.provInfo.val() =="选择省份") {//选择无效时直接返回

      addressInfo.cityInfo.trigger("liszt:updated");

      addressInfo.areaInfo.trigger("liszt:updated");

      return;

    }

    varprovId = addressInfo.provInfo.val();//获取选择的省份值

    varcityOpts ="";

    $j.each(cityJson,function(index, item) {

      if(item.ProID == provId) {

        cityOpts +="

      }

    });

    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("

    varcityId = addressInfo.cityInfo.val();//获取选择的城市值

    varareaOpts ="";

    $j.each(areaJson,function(index, item) {

      if(item.CityID == cityId) {

        areaOpts +="

      }

    });

    addressInfo.areaInfo.append(areaOpts);

    addressInfo.areaInfo.trigger("liszt:updated");

  };

  /*对象初始化方法*/

  this.init =function() {

    addressInfo.provInfo.append("

    addressInfo.cityInfo.append("

    addressInfo.areaInfo.append("

    addressInfo.provInfoInit();

    addressInfo.provInfo.bind("change", addressInfo.selectCity);

    addressInfo.cityInfo.bind("change", addressInfo.selectArea);

  }

  //私有方法,检测参数是否合法

  functionisValid(options) {

    return!options || (options &&typeofoptions ==="object") ?true:false;

  }

}

 

热门栏目