iview select组件全国城市三级级联菜单

Posted 2023-05-07

参考技术A

组件 city.vue

然后在main.js里注册一下city组件，就可以使用了
main.js

使用：
通过this.$refs.city可以拿到对应的值

this.$refs.city.province_value 当前省份
this.$refs.city.city_value 当前城市
this.$refs.city.county_value=>当前区县

效果图

对了，我不知道easy-mock的接口别人能不能调用，不能的话记得@我 = =...
就到这里了，拜拜

JS全国城市三级联动

HTML

<select id="s_province" name="s_province"></select>
<select id="s_city" name="s_city" ></select>
<select id="s_county" name="s_county"></select>

<script class="resources library" src="js/area.js" type="text/javascript"></script>
<script type="text/javascript">_init_area();</script>

/*
*   全国三级城市联动 js版
*/
function Dsy()
    this.Items = ;

Dsy.prototype.add = function(id,iArray)
    this.Items[id] = iArray;

Dsy.prototype.Exists = function(id)
    if(typeof(this.Items[id]) == "undefined") return false;
    return true;


function change(v)
    var str="0";
    for(i=0;i<v;i++)
        str+=("_"+(document.getElementById(s[i]).selectedIndex-1));
    ;
    var ss=document.getElementById(s[v]);
    with(ss)
        length = 0;
        options[0]=new Option(opt0[v],opt0[v]);
        if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v)
            if(dsy.Exists(str))
                ar = dsy.Items[str];
                for(i=0;i<ar.length;i++)
                    options[length]=new Option(ar[i],ar[i]);
                //end for
                if(v) options[0].selected = true; 
            
        //end if v
        if(++v<s.length)change(v);
    //End with


var dsy = new Dsy();

dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省"]);
dsy.add("0_0_0",["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区"]);
dsy.add("0_0",["北京市"]);
dsy.add("0_1_0",["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区"]);
dsy.add("0_1",["天津市"]);
dsy.add("0_2_0",["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区"]);
dsy.add("0_2",["上海市"]);
dsy.add("0_3_0",["渝中区","大渡口区","江北区","沙坪坝区","开县","彭水苗族土家族自治县"]);
dsy.add("0_3",["重庆市"]);
dsy.add("0_4_0",["长安区","桥东区","桥西区","新华区","裕华区","赞皇镇","无极县","无极镇"]);
dsy.add("0_33",["台北","高雄","台中","花莲","基隆","嘉义","金门","连江"]);
dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","云南省","西藏"]);

//此处省略... 完整内容请参见Github的代码：https://github.com/itmyhome2013/national-cities-three-linkage

var s=["s_province","s_city","s_county"];//三个select的name
var opt0 = ["省份","地级市","区县"];//初始值
function _init_area()  //初始化函数
    for(i=0;i<s.length-1;i++)
      document.getElementById(s[i]).οnchange=new Function("change("+(i+1)+")");
    
    change(0);

在线演示：national-cities-three-linkage