select级联操作的简便方法

uule

浏览: 6352024 次
性别:
来自: 一片神奇的土地

最近访客更多访客>>

wangenbao1

hyjqdy

逆光下的轮廓

taominghua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

<script type="text/javascript">
		window.onload=function(){
			translate();
			var continentsSelect = document.getElementById("continents");
			var countrySelect = document.getElementById("country");
			var citySelect = document.getElementById("city");
			continentsSelect.value="AS";
			doContinentsChang(continentsSelect);
			countrySelect.value="HK";
			doCountryChang(countrySelect);
			citySelect.value="HKG";
			
		}
		function doContinentsChang(obj){
			var Code = obj.value;
			var countrySelect = document.getElementById("country");
			
			var num = countrySelect.options.length;
			for(i = num -1 ; i >=0; i--){
				countrySelect.remove(i);
			}
			
			<c:forEach items="${COUNTRIESLIST}" var="country">
				if('${country.continents.code}' == Code ){
					var objOption = new Option("${country.countryName}"+" - "+"${country.countryNameTc}",'${country.countryCode}');
					countrySelect.options[countrySelect.options.length] = objOption;
				}
			</c:forEach>
		
		}
		function doCountryChang(obj){			
			var countryCode = obj.value;
			var citySelect = document.getElementById("city");
			var continentsSelect = document.getElementById("continents");
			
			<c:forEach items="${COUNTRIESLIST}" var="country">
				if('${country.countryCode}' == countryCode ){
					continentsSelect.value='${country.continents.code}'
				}
			</c:forEach>
			
			var num =citySelect.options.length;
			for(i = num-1; i >= 0; i-- ){
				citySelect.remove(i);
			}
			<c:forEach var='city' items='${CITIESLIST}'>
				if('${city.countries.countryCode}' == countryCode){
					var objOption = new Option("${city.cityName}"+" - "+"${city.cityNameTc}","${city.cityCode}" + " - " + "${city.cityName}");
					citySelect.options[citySelect.options.length] = objOption;
				}
			</c:forEach>
			
		}

		function doCityChang(obj){
			var cityCode = obj.value;
		}
		
		function doConfirm(){
			var citySelect = document.getElementById("city");
			if(citySelect.value==""){
				alert("@TW请选择城市@@CN请选择城市@@ENPlease select city@！");
				return false;
			}
			window.returnValue=citySelect.value;
			window.close();
		}
	</script>

<body style="text-align: center;">
	<div align="left" style="width: 380px; padding-left: 10px;">
		<span T:values="@TW地區@@CN地区@@ENContinent@:"></span><br>
		<select id="continents" onchange="doContinentsChang(this)" style="width: 300px;">
			<c:forEach items="${CONTINENTSLIST}" var="continents">
				<option value="${continents.code}">
					${continents.continentsNameEng}(${continents.continentsNameBig5})
				</option>
			</c:forEach>
		</select>
		<br>
		<br>
		<span T:values="@TW國家@@CN国家@@ENCountryCode@:"></span><br>
		<select id="country" onchange="doCountryChang(this);" style="width: 350px;">
			<c:forEach items="${COUNTRIESLIST}" var="country">
				<option value="${country.countryCode}">
					${country.countryName}(${country.countryNameTc})
				</option>
			</c:forEach>
		</select>
		<br>
		<br>
		<span T:values="@TW城市@@CN城市@@ENCity@:"></span><br>
		<select id="city" onchange="doCityChang(this)" style="width: 300px;">
		</select>
		<br>
		<br>
		<br>
		<input type="button" onclick="return doConfirm();" T:values="@TW確認@@CN确认@@ENConfirm@">
		</div>
	</body>

主要使用new option(text,value)

将当前值与forEach值遍历构造option.

2、改变城市时获取country的简便方法：

<table style="width:100%;" border="0">
	<tr>
		<td>
			<span T:values="@TW城市:@@CN城市:@@ENCity:@" ></span>
		</td>
		<td>
			<select name="city" id="city" onChange="doCityChange();" style="width:250px;">
				<option value="-1"></option>
				<c:forEach items="${CITYLISTBYCODE}" var="item" varStatus="i">
					<option value="${item.cityCode},${item.cityName},${item.countries.countryName}">${item.cityName} - ${item.cityNameTw}</option>
				</c:forEach>
			</select>
		</td>
		
		<td>
			<input type="text" readonly="true" name="countryName" id="countryName" style="width:110px;"/>
		</td>
		<td>
			<input type="button" onClick="doSelect();" value="Select" style="width:60px;">
		</td>
	</tr>
</table>

function doCityChange(){
	var city = $("city").value;
	if(city == "-1"){
		$("cityName").value = "";
		$("countryName").value = "";
		return;
	}
	var arr = city.split(",");
	//$("cityName").value = arr[1];
	$("countryName").value = arr[2];
}

遍历City时，将与City关联的Country值放入City的value中，最后分割即可！

查看图片附件

分享到：

struct原理 | ReentrantLock与synchronized

2012-04-18 15:07
浏览 7792
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

select级联操作的简便方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

select级联操作的简便方法

评论

发表评论

相关推荐

Form的onsubmit

使文本框不可编辑[不太常用的方法]

C 标签使用

显示结果排序

GuestName处理方法

[基础]Map在JSP中的两种显示方式

JSP自定义标签

[转]如何用div+css布局页面

iframe总结 + window.open

window.showModalDialog()

一个星期中某一天存在即显示的思路

某一模块动态+、—效果的实现

批量更新时判断哪个需要更新

JSP中循环二维数组 + 循环Map

使用Table的insertRow实现某一模块的复制

[基础]由复选框实现的批量删除

table总结insertRow、deleteRow

struts中用到的复选框和查询技巧

js实现的复选框选中时的批量操作

利用getParameterNames实现一个按钮所有模块数据都提交

最近访客更多访客>>