使用JQuery和bootstrap-select实现世界城市的三级联动（中英互译）

odoo开发

已于 2022-12-24 11:18:18 修改

阅读量1.1k

点赞数 3

文章标签： jquery javascript

于 2021-05-17 18:54:16 首次发布

本文链接：https://blog.csdn.net/lin_ji_you/article/details/116943934

版权

使用JQuery和bootstrap-select实现世界城市的三级联动（中英互译）

我们公司是做外贸电商的，需要一个世界城市的三级联动，在网上找好久发现都没有合适的轮子，只能自己写一个

使用该轮子需要引用bootstrap-select
使用该轮子需要引用JQuery
使用该轮子需要引入世界城市的json数据

  var worldcountry = Widget.extend({
    init: function () {
      this.total(this);
      window.language =
        $("#top_menu .btn-group .dropdown-toggle").text().trim().length === 2
          ? "name"
          : "name_en";
       
      this.getData(this);
      this.saveAddress();
      
    },

    getData: function (self) {
      $.ajax({
        url: "/purchase_plan_website/static/src/json/world.json",
        dataType:"json",
        success: function (res) {
          res = typeof res ==="object"?res:JSON.parse(res)
          // res=JSON.parse(res)
          self.initOption(self, res);
          self.addPlanAaddress()
        },
      });
    },
    /**
     * @description:初始世界城市的三级联动,使用事件委托绑定到各级事件，通过选择不同国家关联不同的城市和街道
     * @param:res
     *
     */

initOption: function (self, res) {
      var countryObj = self.selectCountry(res);
      var obj = self.selectProvince(countryObj.countryObj,countryObj.initSelectOCountry);
      self.selectCity(obj.provinceObj, obj.selectCity);
      self.provinceObj = obj.provinceObj;
      

      $(".plan_country_address").click(
        function (e) {
          if(e.target.tagName!=="A" && e.target.tagName!=="SPAN") return;
          var selectCountry = $(e.target).text();
          var obj = self.selectProvince(countryObj.countryObj, selectCountry);
          self.selectCity(obj.provinceObj, obj.selectCity);
          self.provinceObj = obj.provinceObj;
          //改变地址的值
          var stree=$(".plan_street_address_box button[type=button]").text()
          $(".plan_user_info .form-control").val(`${selectCountry}/${obj.selectCity}/${stree}`)
         
        }
      );
      $(".plan_state_address_box").click(function (e) {
        if(e.target.tagName!=="A" && e.target.tagName!=="SPAN") return;
        var selectCity = $(e.target).text();
        self.selectCity(self.provinceObj, selectCity);
        var stree=$(".plan_street_address_box button[type=button]").text();
        var country=$(".plan_country_address button[type=button]").text()
        $(".plan_user_info .form-control").val(`${country}/${selectCity}/${stree}`)
      });

      $(".plan_street_address_box").click(function (e) {
        if(e.target.tagName!=="A" && e.target.tagName!=="SPAN") return;
        var stree = $(e.target).text();
        var province=$(".plan_state_address_box button[type=button]").text();
        var country=$(".plan_country_address button[type=button]").text()
        $(".plan_user_info .form-control").val(`${country}/${province}/${stree}`)
      });
    },
    /**
     * @description :选择国家时候
     * @param res ：全世界国家城市数据
     */
    selectCountry: function (res) {
      var countryStr = "";
      var countryObj = {};
      var initSelectOCountry;
      for (var i = 0; i < res.length; i++) {
        for (var j = 0; j < res[i].childrens.length; j++) {

          var country = res[i].childrens[j];
          countryStr += `<option>
                    ${country[language]}
                </option>`;
          countryObj[country[language]] = country.childrens;
          if(i===0&&j===0){
            initSelectOCountry=country[language]
          }
        }
      }
      $(".plan_country_address").append(countryStr);
      $(".selectpicker.plan_country_address").selectpicker("refresh");
   
      return {countryObj,initSelectOCountry};
    },
    /**
     * 
     * @param {*} countryObj 所有国家
     * @param {*} selectCountry 选择国家的城市
     * @returns { provinceObj, selectCity } 所有省份 当前选择的省份
     */
    selectProvince: function (countryObj, selectCountry) {
      $(".plan_state_address_box")
        .html(`
        <h3>State</h3>
        <select class="selectpicker plan_state_address" data-live-search="true">                                        
      </select>
      `);
      
      var initCountryValue = selectCountry 
      var province = countryObj[initCountryValue];
      var provinceStr = "";
      var provinceObj = {};
      var selectCity;
      if(province.length<=0){
        $(".plan_state_address_box").css("display","none")
        return {};
      }
      $(".plan_state_address_box").css("display","block")
      for (var k = 0; k < province.length; k++) {
        provinceStr += `<option>${province[k][language]}</option>`;
        provinceObj[province[k][language]] = province[k].childrens;
        if (k === 0) {
          selectCity = province[k][language];
        }
      }

      $(".plan_state_address").append(provinceStr);
      $(".selectpicker.plan_state_address").selectpicker("refresh");


      return { provinceObj, selectCity };
    },
    /**
     * 
     * @param {*} provinceObj  所有省份
     * @param {*} selectCity   选择的省份
     * @returns null
     */
    selectCity: function (provinceObj, selectCity) {
      $(".plan_street_address_box")
        .html(`
        <h3>City/Street</h3>
        <select class="selectpicker plan_street_address" data-live-search="true">                                        
        </select>`);
      var initProvinceValue = selectCity 
      var city = provinceObj[initProvinceValue];
      if (city === undefined || city.length === 0) {
        $(".plan_street_address_box").css("display","none")
        return;
      }
      $(".plan_street_address_box").css("display","block")
      var cityStr = "";
      for (var l = 0; l < city.length; l++) {
        cityStr += `<option>${city[l][language]}</option>`;
      }
      $(".plan_street_address").append(cityStr);
      $(".selectpicker.plan_street_address").selectpicker("refresh");
    },
  });