Example code of Chosen three level linkage function in jQuery

Chosen is an JavaScript plug-in, which makes the ugly, long select selection box look better and more convenient. Moreover, it expands and increases the active screening function.

This article introduces Chosen linkage, and the specific code is as follows:

var addressResolve = function (options) {
  // Check whether the parameters passed in by the user are legal 
  if (!isValid(options))
    return this;
  // Default parameter 
  var defaluts = {
    proId: 'divProv',
    cityId: 'divCity',
    areaId: 'divArea'
  };
  var opts = $j.extend({}, defaluts, options);// Use jQuery.extend  Override plug-in default parameters 
  var addressInfo = this;
  this.provInfo = $j("#" + opts.proId);// Province select Object 
  this.cityInfo = $j("#" + opts.cityId);// City select Object 
  this.areaInfo = $j("#" + opts.areaId);// District and county select Object 
  /* Province initialization method */
  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(); // Initialization chosen
    addressInfo.cityInfo.chosen();// Initialization chosen
    addressInfo.areaInfo.chosen();// Initialization chosen
  };
  /* City selection binding method */
  this.selectCity = function () {
    addressInfo.cityInfo.empty();
    addressInfo.cityInfo.append("<option value= Choose a city > Choose a city </option>");
    addressInfo.areaInfo.empty();
    addressInfo.areaInfo.append("<option value= Select districts and counties > Select districts and counties </option>");
    if (addressInfo.provInfo.val() == " Select provinces ") { // Return directly when the selection is invalid 
      addressInfo.cityInfo.trigger("liszt:updated");
      addressInfo.areaInfo.trigger("liszt:updated");
      return;
    }
    var provId = addressInfo.provInfo.val();// Get the selected province value 
    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");
  };
  /* District and county selection binding method */
  this.selectArea = function () {
    if (addressInfo.cityInfo.val() == " Choose a city ") return;
    addressInfo.areaInfo.empty();
    addressInfo.areaInfo.append("<option value= Select districts and counties > Select districts and counties </option>");
    var cityId = addressInfo.cityInfo.val();// Gets the selected city value 
    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");
  };
  /* Object initialization method */
  this.init = function () {
    addressInfo.provInfo.append("<option value= Select provinces > Select provinces </option>");
    addressInfo.cityInfo.append("<option value= Choose a city > Choose a city </option>");
    addressInfo.areaInfo.append("<option value= Select districts and counties > Select districts and counties </option>");
    addressInfo.provInfoInit();
    addressInfo.provInfo.bind("change", addressInfo.selectCity);
    addressInfo.cityInfo.bind("change", addressInfo.selectArea);
  }
  // Private method to check whether the parameter is legal 
  function isValid(options) {
    return !options || (options && typeof options === "object") ? true : false;
  }
}