`
uule
  • 浏览: 6348903 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

select级联操作的简便方法

    博客分类:
  • JSP
 
阅读更多

 

 

 

<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中,最后分割即可!

 

 

 

 

  • 大小: 26.9 KB
  • 大小: 2.8 KB
分享到:
评论

相关推荐

    select级联下拉列表

    JavaScript提供了丰富的DOM操作方法,如`getElementById`、`addEventListener`等,可以监听`&lt;select&gt;`的`change`事件,当用户做出选择时触发相应的处理函数。jQuery则简化了这些操作,提供了更简洁的语法,如`$('#...

    asp简单的select级联菜单带数据库

    在“asp简单的select级联菜单带数据库”的场景中,我们主要关注的是如何利用ASP技术实现HTML中的&lt;select&gt;元素的级联效果,并且这些下拉菜单的数据来源于数据库。 首先,`dingdan.asp`可能是主页面,它包含用户界面...

    select三级级联选择实例

    一个简单html页面,实现省市的三级级联选择,根据不同情况可以控制不同展现。

    jsp实现级联菜单 jsp实现级联菜单

    ### JSP实现级联菜单详解 #### 一、概述 ...这种方法不仅适用于简单的省份-城市选择器,还可以扩展到更复杂的多级选择器中。开发者可以根据具体需求调整和优化实现细节,以满足不同应用场景的需求。

    Oracle数据库中的级联查询、级联删除、级联更新操作教程

    Oracle数据库中的级联查询、级联删除和级联更新是数据库设计中常用的操作,它们用于在多表关联的关系型数据库中实现数据的联动处理。在Oracle中,这些操作主要涉及外键约束和触发器。 首先,级联查询是通过自连接来...

    级联菜单 ajax

    一个简单的级联操作,可无限进行级联,根据当前下拉框选中的值,通过ajax请求,到后台看当前节点是否有下子节点,在返回json对象,在通过判断json数据的长度来判断是否显示出下一个下拉框和下拉框的值,对一些新手很...

    layui-多选下拉框-xm-select-demo源码

    4. 如果需要动态加载数据,可以使用layui的异步请求方法,结合xm-select的回调函数进行数据绑定。 值得注意的是,xm-select的源码设计灵活,支持自定义模板,开发者可以根据项目需求定制下拉选项的展示样式。此外,...

    jQuery+ajax实现三级级联

    4. **动态更新**:收到服务器响应后,使用jQuery的DOM操作方法,如`html()`或`append()`,更新下一级别的下拉菜单。如果是在三级级联中,这一步会在二级选择改变后进行,以反映出正确的三级选项。 5. **错误处理**...

    JavaScript级联下拉特效制作

    2. **事件监听**:使用JavaScript的`addEventListener`方法监听第一个`&lt;select&gt;`的`change`事件。当用户在第一个下拉菜单中选择了一个选项,就会触发这个事件。 3. **数据结构**:为了动态加载第二个下拉菜单的内容...

    js下拉级联例子

    这通常涉及到DOM操作,例如使用`document.getElementById`或`querySelector`来获取DOM元素,然后用`innerHTML`或`appendChild`等方法来修改其内容。 博文链接中提到的iteye博客文章可能提供了具体的代码实现,但...

    jQuery城市级联插件

    2. DOM操作:插件通过jQuery的DOM操作方法(如`append()`、`html()`等)动态创建并插入HTML元素,展示出级联选择的效果。 3. 事件监听:插件监听用户的选择行为,如点击事件,当用户选择某一选项时,触发相应级别的...

    jQuery 城市三级级联

    在创建级联下拉时,我们可能会使用这些选择器来获取或操作包含城市数据的`&lt;select&gt;`元素。 接下来,我们关注事件处理。在级联下拉中,当用户选择一个省份时,对应的市列表应该动态更新。这可以通过监听`change`事件...

    AJAX级联下拉框源码

    以下是一个简单的jQuery + AJAX实现级联下拉框的示例: ```html &lt;select id="parentSelect"&gt;&lt;/select&gt; &lt;select id="childSelect"&gt;&lt;/select&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/...

    javascript中的级联插件

    在这个场景下,"级联插件"指的是用于实现多级选择效果的工具,常见于下拉选择框(Select)的交互设计中。这种插件能够帮助用户在多个关联的下拉菜单中进行逐级选择,如国家-省份-城市这样的层级关系,或者类别-子...

    级联下拉框效果 jquery

    实现级联下拉框效果,我们通常需要两个或多个`&lt;select&gt;`元素,并通过JavaScript监听第一个下拉框的`change`事件。当用户更改选择时,触发事件处理函数,根据选定的值动态更新第二个下拉框的选项。 以下是一个简单的...

    js 级联选择地区

    级联选择通常由一系列的下拉框(select元素)组成,这些下拉框之间通过JavaScript进行联动。当用户在一个下拉框中选择一个选项时,JavaScript会根据预定义的数据关系更新下一个下拉框的选项。这种联动效果可以提高...

    javascript日期级联

    这是一个用JavaScript写的年,月,日的日期级联select。代码简单明了,易读易用。

    级联下拉列表

    这是一个基础的级联下拉列表实现,对于更复杂的需求,例如异步加载数据、多级级联等,可能需要引入更高级的库,如jQuery UI的`selectmenu`插件或现代前端框架(如React、Vue、Angular)中的组件库。不过,这个简单的...

    超简单的级联下拉框例子

    本示例“超简单的级联下拉框例子”采用了一种独特且简洁的实现方法,旨在减少代码量,提高可读性,并避免使用数组。数组通常用于存储级联选项的数据,但在这个例子中,开发者可能采用了另一种数据结构或者直接在HTML...

Global site tag (gtag.js) - Google Analytics