省市级连和工作地点选择

qianmingmaoyao

于 2022-09-02 08:30:06 发布

阅读量70

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/126654742

版权

省市级连

<style type="text/css">
	#outer{
		width:403px;
		height:167px;
		margin:10px auto;
	}
	#title{
		width:403px;
		height:45px;
		
		background-image:url(images/telTitle.png);
	}
	
	#body{
		width:403px;
		height:124px;
		
		background-image:url(images/telBody.png);
	}
	#choose{
		width:403px;
		height:35px;
		
		text-align:center;
	}
	
	#chinaMobile,#chinaUnicom{
		width:403px;
		height:124px;
		
		line-height:35px;
		font-size:13px;
		text-align:center;
	}
	
	#chinaUnicom{
		display:none;
	}
</style>
<script language="javascript">
	function change(company){		
		
		var chinaMobile = document.getElementById("chinaMobile");
		var chinaUnicom = document.getElementById("chinaUnicom");
		
		if(company == 'mobile'){
			chinaMobile.style.display = "block";
			chinaUnicom.style.display = "none";
		}else if(company == 'unicom'){
			chinaMobile.style.display = "none";
			chinaUnicom.style.display = "block";
		}
	}
	// 定义一个简便的调用document.getElementById()的方法
	function $(obj){
		return document.getElementById(obj);
	}
	
	// 级联特效的代码
	function cascade1(){
		var hb = new Array("石家庄","廊坊","衡水","邯郸");   
		var hn = new Array("郑州","洛阳","开封","安阳");
		var province = $("province").value;
		$("city").options.length = 0;		
		if(province == "河北"){
			for(var i=0; i<hb.length; i++){
				var opt = document.createElement("option");  //<option value='石家庄'>石家庄</option>
				opt.setAttribute("value",hb[i]);
				opt.innerHTML = hb[i];
				$("city").appendChild(opt);
			}
		}
			
		if(province == "河南"){
			for(var i=0; i<hn.length; i++){
				var opt = document.createElement("option");
				opt.setAttribute("value",hn[i]);
				opt.innerHTML = hn[i];
				$("city").appendChild(opt);
			}
		}
	}
	
	// 级联特效的代码-方法2
	function cascade2(){
		var hb = new Array("石家庄","廊坊","衡水","邯郸");
		var hn = new Array("郑州","洛阳","开封","安阳");
		var province = $("province").value;
		$("city").options.length = 0;
		if(province == "河北"){
			for(var i=0; i<hb.length; i++){
				var opt = document.createElement("option");
				opt.value = hb[i];
				opt.text  = hb[i];					// 注意这个用法，这里写innerHTML，报错!!
				$("city").options.add(opt);		// 这句话很重要!!要牢记!!
			}
		}
		if(province == "河南"){
			for(var i=0; i<hn.length; i++){
				var opt = document.createElement("option");
				opt.value = hn[i];
				opt.text  = hn[i];
				$("city").options.add(opt);
			}
		}	
	}
	
	// 级联特效的代码-方法3
	function cascade3(){
		var arr = new Array(2);
		arr["河北"] = ["石家庄","廊坊","衡水","邯郸"];
		arr["河南"] = ["郑州","洛阳","开封","安阳"];
		var province = $("province").value;
		$("city").options.length = 0;
		for(var index in arr[province]){
			var opt = document.createElement("option");
			opt.value = arr[province][index];
			opt.text  = arr[province][index];
			document.getElementById("city").options.add(opt);
		}	
	}

	// 级联特效的代码-方法4
	function cascade4(){
		var arr = new Array(2);
		arr["河北"] = ["石家庄","廊坊","衡水","邯郸"];
		arr["河南"] = ["郑州","洛阳","开封","安阳"];
		var province = $("province").value;
		$("city").options.length = 0;
		for(var index in arr[province]){
			var opt = new Option(arr[province][index],arr[province][index]);
			document.getElementById("city").options.add(opt);
		}	
	}
</script>
</head>

<body>
	<div id="outer">
    	<div id="title"></div>
        
        <div id="body">
        	<div id="choose">
            <form name="companyForm">
            	<input type="radio" name="company" value="mobile" onclick="change(this.value)"/>移动充值&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="company" value="unicom" onclick="change(this.value)"/>联通充值
            </form>
            </div>
            <div id="chinaMobile">
                区域：
                <select name="province" id="province" onchange="cascade2()">
                    <option value="请输入您所在的省份">--请输入您所在的省份--</option>
                    <option value="河北">河北</option>
                    <option value="河南">河南</option>
                </select>省&nbsp;&nbsp;
                
                <select name="city" id="city">
                    <option value="请输入您所在的城市">--请输入您所在的城市--</option>
                </select>市
                <br />
                充值金额：<input type="text" name="amount" />&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" value="移动充值" />
            </div>
            <div id="chinaUnicom">
            	区域：
                <select name="province2">
                	<option value="请输入您所在的省份">--请输入您所在的省份--</option>
                </select>省&nbsp;&nbsp;
                
            	<select name="city2">
                	<option value="请输入您所在的城市">--请输入您所在的城市--</option>
                </select>市
                <br />
                <select name="amount2">
                	<option value="10">10</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>元&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" value="联通充值" />           	
            </div>
        </div>
    </div>

工作地点遮罩层

<style>
	*{
	margin:0;
	padding:0;
	}
	
	#cover{
		background:#CCCCCC;
		top:0;left:0;
		position:absolute;
		filter:alpha(opacity=60);
		opacity:0.6 !important;
		z-index:2;
	}
	#citydiv{
		border:1px solid #993333; 
		background:#FFFFFF;
		width:300px;
		height:250px;
		display:none;
		margin-left:100px;
		position:relative;
		z-index:10;
	}
	#closer{
   	 font-size:11px;
	 position:absolute;
	 margin-left:231px;
	 }
</style>
</head>
<script>
	function $(obj){
		return document.getElementById(obj);
	}
	
	function init(){
		var cover=$("cover");
		cover.style.width=document.documentElement.scrollWidth+"px";
		cover.style.height=document.documentElement.scrollHeight+"px";
		cover.style.display="none";
	}
	
	// 显示遮罩层和城市列表
	function show(){
		$("cover").style.display="block";
		$("citydiv").style.display="block";
	}
	
	//隐藏遮罩层
	function hide(){
		$("cover").style.display="none";
		$("citydiv").style.display="none";
	}
	
	//将选择的城市添加到文本框
	function subs(){
		var arr=document.getElementsByName("city");
		var str="";
		
		for(i=0;i<arr.length;i++){
			if(arr[i].checked){
				str+=arr[i].value+",";
			}	
		}
		str=str.substr(0,str.length-1);		
		$("position").value=str;
		hide();	
		
	}
	
	
	
</script>

<body onload="init()">
	请输入城市：<input type="text" id="position" /><a href="javascript:void(0)" onclick="show()">请选择希望的城市</a>
	<div id="cover"></div>
	<div id="citydiv">
	 <a href="javascript:void(0)" id="closer" onclick="hide()">关闭</a>
	 <select id="province">
	 	<option value="hn">河南</option>
	 </select>
	 <br />
			<input type="checkbox" name="city" value="郑州市">郑州市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="洛阳市">洛阳市<br />
            <input type="checkbox" name="city" value="焦作市">焦作市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="新乡市">新乡市<br />
            <input type="checkbox" name="city" value="鹤壁市">鹤壁市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="安阳市">安阳市<br />
            <input type="checkbox" name="city" value="濮阳市">濮阳市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="开封市">开封市<br />
            <input type="checkbox" name="city" value="商丘市">商丘市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="许昌市">许昌市<br />
            <input type="checkbox" name="city" value="漯河市">漯河市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="平顶山市">平顶山市<br />
            <input type="checkbox" name="city" value="南阳市">南阳市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="信阳市">信阳市<br />
            <input type="checkbox" name="city" value="济源市">济源市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="周口市">周口市<br />
            <input type="checkbox" name="city" value="驻马店市">驻马店市&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="三门峡市">三门峡市<br />
			<input type="button" value="提交" onclick="subs()" />&nbsp;&nbsp;<input type="button" value="取消" onclick="cancel()" />&nbsp;&nbsp;<input type="button" value="默认" onclick="default()" />
	</div>