用原生态js和用vue分别写选择省地址就会出现地级市地址

本文链接：https://blog.csdn.net/gm_168/article/details/118551829

下面是原生态js开发，以下是全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址</title>
    
</head>
<body>
  <script>
      var province=["广东省","福建","广西"];
      var citys=[];
      citys[0]=["广州市","深圳市","佛山市","东莞市","中山市","珠海市","江门市","肇庆市","惠州市","汕头市","湛江市","揭阳市"];
      citys[1]=["福州","厦门","漳州","泉州","莆田","三明","南平","龙岩","宁德"];
      citys[2]=["南宁市","崇左市","柳州市","来宾市","桂林市","梧州市","贺州市","玉林市","贵港市","百色市","钦州市"];
             for (var k=0;k<2;k++){
                 var se=document.createElement("select");

                 document.body.appendChild(se);
             }
            var sel=document.getElementsByTagName("select");
             for (var i=0;i<province.length;i++){
                 var nod=document.createElement("option");
                 nod.innerHTML=province[i];
                 
                 sel[0].appendChild(nod);
             }
        sel[0].onclick=function () {
            var ind=this.selectedIndex;
            var city=citys[ind];
            sel[1].innerHTML="";
            for (var j=0,len=city.length;j<len;j++) {
                var nod2=document.createElement("option");
                nod2.innerHTML=city[j];
                sel[1].appendChild(nod2);
            }
        }



  </script>


</body>
</html>

解释：

这个是用for循环产生两个select:

for (var k=0;k<2;k++){
                 var se=document.createElement("select");

                 document.body.appendChild(se);
             }

用for循环给第一个select添加选择option和内容，每次循环都要创建节点，节点添加内容，然后给第一个select添加这个创建的节点：

 var sel=document.getElementsByTagName("select");
             for (var i=0;i<province.length;i++){
                 var nod=document.createElement("option");
                 nod.innerHTML=province[i];
                 
                 sel[0].appendChild(nod);
             }

点击第一个select的option,this代表sel[0]这个对象，而selectedIndex记录用户点击是哪个的下标，然后把点击下标对应的citys数组赋给新的数组，把这新的数组的数据用for循环赋给第二个select的option内容，用户每次点击完都要用sel[1].innerHTML=""把上次的内容清零，不然就会留着上次的数据在里面

  sel[0].onclick=function () {
            var ind=this.selectedIndex;
            var city=citys[ind];
            sel[1].innerHTML="";
            for (var j=0,len=city.length;j<len;j++) {
                var nod2=document.createElement("option");
                nod2.innerHTML=city[j];
                sel[1].appendChild(nod2);
            }
        }

用js的框架vue来开发，以下是全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<body>
         <div id="app">
              <label>省：</label>
             <select v-model="selected">

                 <option v-for="option in options" v-bind:value="option.city" >
                     {{option.province}}
                 </option>
             </select>
             <label>地级市：</label>
             <select>
                 <option v-for="sel in selected">
                     {{sel}}
                 </option>
             </select>


         </div>
       <script>

         new Vue({
             el:"#app",
             data:{
                 selected:'',
                options:[
                    {province:'广东省',city:["广州市","深圳市","佛山市","东莞市","中山市","珠海市","江门市","肇庆市","惠州市","汕头市","湛江市","揭阳市"]},
                    {province:'福建',city:["福州","厦门","漳州","泉州","莆田","三明","南平","龙岩","宁德"]},
                    {province:'广西',city:["南宁市","崇左市","柳州市","来宾市","桂林市","梧州市","贺州市","玉林市","贵港市","百色市","钦州市"]}
                ]
             }
         })

    </script>
</body>
</html>

解释：

vue相对简单点，就是用v-for循环打印option，关键是用v-bind声明value属性，每次点击对应的city数alue,而v-model就是获取value的值，就是说v-model声明的selected的值就是value的值，用for循环v-model的值给第二个select的option赋值