Edit in JSRUN

console 命令行工具 X clear

                    
>
console
window.areaJson = {
  "1300": {
    "name": "河北省",
    "sub": {
      "1301": {
        "name": "石家庄市",
        "sub": {
          "130101": "市辖区",
          "130102": "长安区",
          "130103": "桥东区",
          "130104": "桥西区",
          "130105": "新华区",
          "130107": "井陉矿区",
          "130108": "裕华区",
          "130121": "井陉县",
          "130123": "正定县",
          "130124": "栾城县",
          "130125": "行唐县",
          "130126": "灵寿县",
          "130127": "高邑县",
          "130128": "深泽县",
          "130129": "赞皇县",
          "130130": "无极县",
          "130131": "平山县",
          "130132": "元氏县",
          "130133": "赵县",
          "130181": "辛集市",
          "130182": "藁城市",
          "130183": "晋州市",
          "130184": "新乐市",
          "130185": "鹿泉市"
        }
      },
      "1302": {
        "name": "唐山市",
        "sub": {
          "130201": "市辖区",
          "130202": "路南区",
          "130203": "路北区",
          "130204": "古冶区",
          "130205": "开平区",
          "130207": "丰南区",
          "130208": "丰润区",
          "130223": "滦县",
          "130224": "滦南县",
          "130225": "乐亭县",
          "130227": "迁西县",
          "130229": "玉田县",
          "130230": "唐海县",
          "130281": "遵化市",
          "130283": "迁安市"
        }
      },
      "1303": {
        "name": "秦皇岛市",
        "sub": {
          "130301": "市辖区",
          "130302": "海港区",
          "130303": "山海关区",
          "130304": "北戴河区",
          "130321": "青龙满族自治县",
          "130322": "昌黎县",
          "130323": "抚宁县",
          "130324": "卢龙县"
        }
      },
      "1304": {
        "name": "邯郸市",
        "sub": {
          "130401": "市辖区",
          "130402": "邯山区",
          "130403": "丛台区",
          "130404": "复兴区",
          "130406": "峰峰矿区",
          "130421": "邯郸县",
          "130423": "临漳县",
          "130424": "成安县",
          "130425": "大名县",
          "130426": "涉县",
          "130427": "磁县",
          "130428": "肥乡县",
          "130429": "永年县",
          "130430": "邱县",
          "130431": "鸡泽县",
          "130432": "广平县",
          "130433": "馆陶县",
          "130434": "魏县",
          "130435": "曲周县",
          "130481": "武安市"
        }
      },
      "1305": {
        "name": "邢台市",
        "sub": {
          "130501": "市辖区",
          "130502": "桥东区",
          "130503": "桥西区",
          "130521": "邢台县",
          "130522": "临城县",
          "130523": "内邱县",
          "130524": "柏乡县",
          "130525": "隆尧县",
          "130526": "任县",
          "130527": "南和县",
          "130528": "宁晋县",
          "130529": "巨鹿县",
          "130530": "新河县",
          "130531": "广宗县",
          "130532": "平乡县",
          "130533": "威县",
          "130534": "清河县",
          "130535": "临西县",
          "130581": "南宫市",
          "130582": "沙河市"
        }
      },
      "1306": {
        "name": "保定市",
        "sub": {
          "130601": "市辖区",
          "130602": "新市区",
          "130603": "北市区",
          "130604": "南市区",
          "130621": "满城县",
          "130622": "清苑县",
          "130623": "涞水县",
          "130624": "阜平县",
          "130625": "徐水县",
          "130626": "定兴县",
          "130627": "唐县",
          "130628": "高阳县",
          "130629": "容城县",
          "130630": "涞源县",
          "130631": "望都县",
          "130632": "安新县",
          "130633": "易县",
          "130634": "曲阳县",
          "130635": "蠡县",
          "130636": "顺平县",
          "130637": "博野县",
          "130638": "雄县",
          "130681": "涿州市",
          "130682": "定州市",
          "130683": "安国市",
          "130684": "高碑店市"
        }
      },
      "1307": {
        "name": "张家口市",
        "sub": {
          "130701": "市辖区",
          "130702": "桥东区",
          "130703": "桥西区",
          "130705": "宣化区",
          "130706": "下花园区",
          "130721": "宣化县",
          "130722": "张北县",
          "130723": "康保县",
          "130724": "沽源县",
          "130725": "尚义县",
          "130726": "蔚县",
          "130727": "阳原县",
          "130728": "怀安县",
          "130729": "万全县",
          "130730": "怀来县",
          "130731": "涿鹿县",
          "130732": "赤城县",
          "130733": "崇礼县"
        }
      },
      "1308": {
        "name": "承德市",
        "sub": {
          "130801": "市辖区",
          "130802": "双桥区",
          "130803": "双滦区",
          "130804": "鹰手营子矿区",
          "130821": "承德县",
          "130822": "兴隆县",
          "130823": "平泉县",
          "130824": "滦平县",
          "130825": "隆化县",
          "130826": "丰宁满族自治县",
          "130827": "宽城满族自治县",
          "130828": "围场满族蒙古族自治县"
        }
      },
      "1309": {
        "name": "沧州市",
        "sub": {
          "130901": "市辖区",
          "130902": "新华区",
          "130903": "运河区",
          "130921": "沧县",
          "130922": "青县",
          "130923": "东光县",
          "130924": "海兴县",
          "130925": "盐山县",
          "130926": "肃宁县",
          "130927": "南皮县",
          "130928": "吴桥县",
          "130929": "献县",
          "130930": "孟村回族自治县",
          "130981": "泊头市",
          "130982": "任邱市",
          "130983": "黄骅市",
          "130984": "河间市"
        }
      },
      "1310": {
        "name": "廊坊市",
        "sub": {
          "131001": "市辖区",
          "131002": "安次区",
          "131003": "广阳区",
          "131022": "固安县",
          "131023": "永清县",
          "131024": "香河县",
          "131025": "大城县",
          "131026": "文安县",
          "131028": "大厂回族自治县",
          "131081": "霸州市",
          "131082": "三河市"
        }
      },
      "1311": {
        "name": "衡水市",
        "sub": {
          "131101": "市辖区",
          "131102": "桃城区",
          "131121": "枣强县",
          "131122": "武邑县",
          "131123": "武强县",
          "131124": "饶阳县",
          "131125": "安平县",
          "131126": "故城县",
          "131127": "景县",
          "131128": "阜城县",
          "131181": "冀州市",
          "131182": "深州市"
        }
      }
    }
  }
};
new Vue({
  el: '#app',
  data: function() {
    return {
      formArr: [{
        province: '', //省
        city: '', //市
        area: '', //区
        tempProvince: null,
        tempCity: null,
        tempArea: null
      }],
      areaJson: null,
      submitJson: ''
    }
  },
  ready: function() {
    this.formArr[0]['tempProvince'] = window.areaJson;
    this.areaJson = window.areaJson;
  },
  methods: {
    add: function() {
      var obj = {
        province: '', //省
        city: '', //市
        area: '', //区
        tempProvince: this.areaJson,
        tempCity: null,
        tempArea: null
      };
      this.formArr.push(obj);
    },
    del: function(index) {
      this.formArr.splice(index, 1);
    },
    changeProvince: function(e) {
      var $target = $(e.target);
      var index = $target.attr('data-index');
      var id = $target.val();
      this.formArr[index].tempCity = null;
      this.formArr[index].tempArea = null;
      if ($.isEmptyObject(this.areaJson[id]['sub'])) {
        var str = '{"' + id + '" : { "name":"' + this.areaJson[id]['name'] + '"}}';
        var str1 = '{"' + id + '" : "' + this.areaJson[id]['name'] + '"}';
        this.formArr[index]['tempCity'] = JSON.parse(str);
        this.formArr[index].tempCity[id]['sub'] = JSON.parse(str1);
      } else {
        this.formArr[index].tempCity = this.areaJson[id]['sub'];
      }
    },
    changeCity: function(e) {
      var $target = $(e.target);
      var index = $target.attr('data-index');
      var id = $target.val();
      this.formArr[index].tempArea = this.formArr[index].tempCity[id]['sub'];
    },
    submit: function() {
      var arr = [];
      var temp = this.formArr;
      for (var i = 0; i < temp.length; i++) {
        var form = temp[i];
        var tempForm = {
          province: form.province, //省
          city: form.city, //市
          area: form.area //区
        }

        arr[i] = tempForm;

      }



      this.submitJson = JSON.stringify(arr);
    }
  }
})
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
  <h3>
    vue 实现省市三级联动,可以动态增加省市三级联动模块
  </h3>
  <p v-for="form in formArr">
    <select class="select" v-model="form.province" class="province" data-index="{{$index}}" v-on:change="changeProvince">
      <option value="-1" selected>省份</option>
      <option v-for="area in form.tempProvince" value="{{$key}}" v-if="area.name">{{area.name}}</option>
    </select>
    <select class="select" v-model="form.city" v-on:change="changeCity" data-index="{{$index}}">
      <option value="-1" selected>市</option>
      <option v-for="city in form.tempCity" value="{{$key}}">{{city.name}}</option>
    </select>
    <select class="select" v-model="form.area">
      <option value="-1" selected>县</option>
      <option v-for="area in form.tempArea" value="{{$key}}">{{area}}</option>
    </select>
    <button @click="add" v-if="$index == 0">添加</button>
    <button @click="del($index)" v-if="$index != 0">删除</button>
  </p>
  <h3>提交的数据:</h3>
  <p>{{submitJson}}</p>
  <p>
    <button @click="submit">提交</button>
  </p>
</div>