zoukankan      html  css  js  c++  java
  • 级联下拉列表

    //依据所选的省。自己主动生成相应的市

    <html>
    	<head>
    		<title>级联列表</title>
    		<meta http-equiv='Content-Type' content='text/css;charset=utf-8'/>
    		<style>
    			.yemian{
    				margin-left:30%;
    				text-align:center;
    				font-size:50px;
    				500px;
    				height:500px;
    				background-color:blue;
    			}   
    			.s{
    				120px;
    				height:25px;
    			}
    		</style>
    		<script>
    			function st(){
    			
    				var sheng=document.getElementById('sheng');
    				//存省的数组。可自行加入
    				var shengs=new Array(new Option("--请选择省--",''),new Option("湖南","hn"),new Option("广东","gd"));
    				for(var i=0;i<shengs.length;i++){
    					sheng.options[i]=shengs[i];
    				}
    			}
    			//存市的数组,依据省的数组加入
    			var shis=new Array();
    			shis[0]=new Array(new Option("--请选择市--",''));
    			shis[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));
    			shis[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz'));
    			function change(obj){
    				var shi=document.getElementById('shi');
    				shi.options.length=0;
    				var index=sheng.selectedIndex;
    				for(var x in shis[index]){
    					shi.options[x]=shis[index][x]
    				}
    			}
    		</script>
    	</head>
    	<body  onload="st()">
    		<div class='yemian' >
    			<div class="top">级联下拉列表</div>
    			<select class='s' id='sheng' onchange='change(this)'>
    				<option value=''>--请选择省--</option>
    			</select>
    			<select class='s' id='shi'>
    				<option value=''>--请选择市--</option>
    			</select>
    		</div>
    	</body>
    
    
    </html>



  • 相关阅读:
    es5核心技术
    es6 迭代器 和 生成器 学习笔记
    nodejs 基础学习笔记
    node 基本原理
    mac php7 连接数据库遇到的问题
    express ,koa1, koa2学习笔记
    mac mysql的安装
    webpack 给css添加前缀
    利用git将本地的代码同步到github上
    vuex 学习总结及demo
  • 原文地址:https://www.cnblogs.com/gavanwanggw/p/6726543.html
Copyright © 2011-2022 走看看