程序博客网 > 上古世纪捏脸萝莉数据

纯网页省市二级联动(无数据库)

来源：互联网发布：上古世纪捏脸萝莉数据编辑：程序博客网时间：2024/05/01 14:18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>js_tag.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">
window.onload=function(){

  //js数组来存放采用的js的原生格式
  var provinces=[
   {
    id:'1',
    name:'北京',
    city:['海淀区','朝阳区','大兴区']
   },
   {
    id:'2',
    name:'天津',
    city:['北辰区','和平区','虹桥区']
   },
   {
    id:'3',
    name:'上海',
    city:['上海a','上海B区','上海C区']
   },
   {
    id:'4',
    name:'重庆',
    city:['AA区','BB区','CC区']
   }
  ];

  var domprovinces=document.getElementById("province");
  //当页面已加载就把省份显示的操作

  for(var i=0;i<provinces.length;i++){
   //获取具体的省份对象
   var pro=provinces[i];
   //创建option标签
   var option=document.createElement("option");
   //为option标签添加value属性
   option.setAttribute("value",pro.id);
   //创建一个文本节点
   var textNode=document.createTextNode(pro.name);
   //添加到option节点中
   option.appendChild(textNode);//为创建的元素节点添加子节点
   //添加到id=province的select标签中
   domprovinces.appendChild(option);//把创建的元素节点添加到指定的节点中
  }

  var domcity=document.getElementById("city");
  //当省份发生改变的时候，就把响应的市区显示给客户
  domprovinces.onchange=function(){
   //清楚数据(把上次浏览保留的数据清除掉)
   domcity.length=1;
   //添加
   for(var i=0;i<provinces.length;i++){
    //获取具体省份
    var dompro=provinces[i];
    if(this.value==dompro.id){
     var city=dompro.city;
     for(var j=0;j<city.length;j++){

      var doption=document.createElement("option");
      var dtextNode=document.createTextNode(city[j]);
      //添加到option中
      doption.appendChild(dtextNode);
      domcity.appendChild(doption);
     }
     break;
    }else{
     continue;
    }
   }
  };
};

</script>

</head>

<body>


    <select id="province">
    <option value="-1">请选择省份</option>
    </select>

    <select id="city">
    <option value="-1">请选择市区</option>
    </select>

</body>
</html>

上古世纪捏脸萝莉数据

上古世纪捏脸萝莉数据

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子竹林七贤和建安七子怀旧服七贤石板竹林七贤是指哪七个人大连七贤贡院三脉七轮脉轮测试七轮七脉轮七脉轮测试七个小矮人轮日白雪公主七个脉轮打开后的感受七轮三脉从读心术开始七轮七香宝辇辇辇怎么读辇毂之下辇毂起辇谷北京金辇酒店晋城金辇大酒店辇的读音华夏龙辇酒42度图片报价七进七郎七郎拍客七郎拍客在免费每天堪七郎总裁的逆天邪医七郎阿拉善七雄战国七雄追鬼七雄七雄争霸一英战七雄七雄一女站七雄漠北七雄善女战七雄女战七雄11分52秒卷边女战七雄卷边漠北七雄狼王