如何用代码块功能插入代码?

问题遇到的现象和发生背景
用代码块功能插入代码,请勿粘贴截图
我想要达到的结果

img

img


循环写在方法里面


<script>
        function fillcity() {
            var province = document.getElementById("province").value;
            var cities = null
            console.log("===>", province)
            switch (province) {
                case "四川":
                    cities = ["成都", "内江", "绵阳", "南充"];
                    break;
                case "云南":
                    cities = ["昆明", "大理", "丽江", "楚雄"];
                    break;
                case "湖南":
                    cities = ["秦州", "岳麓", "安定", "长沙"];
                    break;
                case "江苏":
                    cities = ["苏州", "南京", "扬州", "镇江"];
                    break;
            }
            for (var i = 0; i < cities.length; i++) {
                var city = document.getElementById("city");
                city.options[i] = new Option(cities[i], cities[i]);
            }
        }
    </script>

写的很花,为了体现作者对指针很牛逼。其实就是二维数组元素进行交换而已。交换方式就是行变列,列变行

34行<删掉

cities在外层定义

img

是点了四川之后,不能出现对应的城市

循环部分改成如下就可以了

var city = document . getElementById("city");
var jtml='';
for (var i=0; i<cities.length;i++) {
jtml+='<option value="'+cities[i]+'">'+cities[i]+'</option>';
};
city.innerHTML =jtml;

function fillcity() {
  var province = document.getElementById("province").value
  let cities = []
  switch (province) {
    case '江苏':
      cities = ["昆明", "大理", "丽江", "楚雄"];
      break
    default:
  }
  console.log(cities)
}

img

循环部分改下

34行那个左括号删掉,
函数里面的循环部分修改下