JavaScript中初学DOM的综合应用(省市联动)

最新推荐文章于 2022-04-14 19:17:01 发布

向上的狼

最新推荐文章于 2022-04-14 19:17:01 发布

阅读量117

点赞数 1

分类专栏： JavaScript 文章标签： javascript html5 css dom操作

本文链接：https://blog.csdn.net/m0_50370837/article/details/117566474

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript中初学DOM的综合应用

涉及到的知识点和所领悟到的内容
1:JavaScript中数组的构建是可以通过json格式来保持多个数据的

//构建复杂数组
var provinces = [
     {"name":"湖北","nickName":"鄂","citys":"武汉,黄石,襄阳,宜昌,孝感"},
     {"name":"河南","nickName":"豫","citys":"郑州,开封,漯河,洛阳,鹿邑"},
     {"name":"广东","nickName":"粤","citys":"广东,深圳,东莞,珠海,佛山"},
 ];

2:onchage事件和onload事件的使用

<select name="province" id="province" onchange="changeCity(this); show();">
   <option value="">请选择</option>
</select>

<body onload="fillProvince();">
     ___________
</body>

3:如何把一个标签中的内容去掉

var city1 = document.getElementById("city");
//清空前面的城市
city1.length = 0;      //仔细看这个(对象长度为0就可以实现之前所选择的为空);

源代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>js4</title>
    <style type="text/css">
       
    </style>

</head>
<body onload="fillProvince();">
  <script type="text/javascript">
    function fillProvince(){
    var province = document.getElementById("province");
     //构建复杂数组
     var provinces = [
         {"name":"湖北","nickName":"鄂","citys":"武汉,黄石,襄阳,宜昌,孝感"},
         {"name":"河南","nickName":"豫","citys":"郑州,开封,漯河,洛阳,鹿邑"},
         {"name":"广东","nickName":"粤","citys":"广东,深圳,东莞,珠海,佛山"},
     ];

     for(var i in provinces){
         //创建一个optiom
         var city = document.createElement("option");
         city.innerText = provinces[i].name;
         city.value = provinces[i].citys;        //将省份对应的城市信息保存到option的value中
         province.appendChild(city);
     }
 }

  //将用户所选择的信息显示在div中
  function show(){
      var province = document.getElementById("province");
      var i = province.selectedIndex;             //获得用户所选择的索引号
      var value = "名称:"+province.options[i].innerText+"<br/>"+"城市:"+province.options[i].value+"<br/>";
      var div1 = document.getElementById("div1");
      div1.innerHTML = value
  }

  //当省份改动时,城市同步改变
  function changeCity(province){
      //获得城市下拉框
      var city1 = document.getElementById("city");
      var citys = province.options[province.selectedIndex].value;
      //将获得城市的字符串转换为数组
      var citysArray = citys.split(",");
      //清空前面的城市
      city1.length = 0;      //仔细看这个(对象长度为0就可以实现之前所选择的为空);

      for(var i = 0;i<citysArray.length;i++){
          var city = document.createElement("option");
          city.innerHTML = citysArray[i];    
          city.value = citysArray[i];
          city1.appendChild(city);
      }
  }
  </script>
  <div>
       <select name="province" id="province" onchange="changeCity(this); show();">
           <option value="">请选择</option>
       </select>
       <select name="city" id="city"></select>
       <div id="div1"></div>
   </div>
</body>
</html>

向上的狼

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中初学DOM的综合应用(省市联动)

JavaScript中初学DOM的综合应用涉及到的知识点和所领悟到的内容1:JavaScript中数组的构建是可以通过json格式来保持多个数据的//构建复杂数组var provinces = [ {"name":"湖北","nickName":"鄂","citys":"武汉,黄石,襄阳,宜昌,孝感"}, {"name":"河南","nickName":"豫","citys":"郑州,开封,漯河,洛阳,鹿邑"}, {"name":"广东","nickName":"粤",
复制链接

扫一扫

专栏目录