- 浏览: 6351853 次
- 性别:
- 来自: 一片神奇的土地
文章分类
- 全部博客 (745)
- JQuery (25)
- JS (33)
- 数据库 (59)
- Java基础 (56)
- JSON (8)
- XML (8)
- ireport (7)
- 设计模式 (10)
- 心情 (14)
- freemarker (1)
- 问题 (15)
- powerdesigner (2)
- CSS (15)
- DWR (4)
- tomcat (16)
- Hibernate (12)
- Oracle (7)
- Struts (7)
- Spring (34)
- JSP (23)
- 需学习 (64)
- 工具类库 (63)
- Maven (14)
- 笔试题 (34)
- 源码学习 (31)
- 多线程 (39)
- Android (32)
- 缓存 (20)
- SpringMVC (14)
- jQueryEasyUi (12)
- webservice-RPC (13)
- ant (1)
- ASP.NET (10)
- 正则表达式 (3)
- Linux (15)
- JBoss (1)
- EJB (3)
- UML (2)
- JMS (3)
- Flex (8)
- JSTL (2)
- 批处理 (5)
- JVM (16)
- 【工具】 (16)
- 数据结构 (29)
- HTTP/TCP/Socket (18)
- 微信 (1)
- tomcat源码学习 (15)
- Python (30)
- 主机 (2)
- 设计与架构 (19)
- thrift-RPC (2)
- nginx (6)
- 微信小程序 (0)
- 分布式+集群 (12)
- IO (1)
- 消息队列 (4)
- 存储过程 (8)
- redis (9)
- zookeeper (5)
- 海量数据 (5)
最新评论
-
360pluse:
技术更新,战术升级!Python爬虫案例实战从零开始一站通网盘 ...
Python爬虫实战:Scrapy豆瓣电影爬取 -
18335864773:
推荐用 pageoffice 组件生成 word 文件。
JAVA生成WORD工具类 -
jjhe369:
LISTD_ONE 写道起始地址为163.135.0.1 结束 ...
IP地址与CIDR -
baojunhu99:
private final int POOL_SIZE = 5 ...
使用CompletionService获取多线程返回值 -
LovingBaby:
胡说,javascript 运行时是单线程的,event lo ...
Ajax请求是否可以实现同步
<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中,最后分割即可!
发表评论
-
Form的onsubmit
2015-02-05 11:06 47761. <form class="for ... -
使文本框不可编辑[不太常用的方法]
2012-09-10 11:17 2422为了使本框不可编辑,我们可以使用下面几种方法 解决思路: 文本 ... -
C 标签使用
2012-07-26 12:16 2933<title>虚拟机管控</title&g ... -
显示结果排序
2012-05-04 14:15 1293<td width="9%" s ... -
GuestName处理方法
2012-01-31 10:39 2164主要考虑如何设计,如何实现,如何思考! 效果: ... -
[基础]Map在JSP中的两种显示方式
2011-10-27 09:36 139111、 Java: for(EglSpecialRequ ... -
JSP自定义标签
2011-09-01 12:07 1720实际使用: <td style="text- ... -
[转]如何用div+css布局页面
2011-08-01 17:58 2294如今web2.0炒的很厉害, ... -
iframe总结 + window.open
2011-06-20 11:47 15974从frame中跳出并转向: parent.window. ... -
window.showModalDialog()
2011-06-01 15:23 3597window.open() 打开一个普通窗口 win ... -
一个星期中某一天存在即显示的思路
2011-05-31 17:48 11521、 days: 1,2,3,4,5,6,0 // ... -
某一模块动态+、—效果的实现
2011-04-21 11:08 1371代码(去掉部分css细节,只关注主要功能): < ... -
批量更新时判断哪个需要更新
2011-04-06 16:03 1881<input type="checkbox ... -
JSP中循环二维数组 + 循环Map
2011-04-01 16:46 7264代码如下: <C:forEach items=&q ... -
使用Table的insertRow实现某一模块的复制
2011-03-21 14:16 3334实现的效果:点击+号添加一组 JSP页面: < ... -
[基础]由复选框实现的批量删除
2011-03-21 11:31 2999批量删除: 选中多个复选框: 每一条记录: ... -
table总结insertRow、deleteRow
2011-03-16 16:13 20505表格有几行: var trCnt = table.rows.l ... -
struts中用到的复选框和查询技巧
2011-03-09 11:06 123实现效果:1、选中复选框时,其后文本框显示,没选中时,隐藏 ... -
js实现的复选框选中时的批量操作
2011-03-04 14:22 57311. var checkedList = []; // sa ... -
利用getParameterNames实现一个按钮所有模块数据都提交
2010-11-27 13:13 15751.总结: 1、注意 ...
相关推荐
JavaScript提供了丰富的DOM操作方法,如`getElementById`、`addEventListener`等,可以监听`<select>`的`change`事件,当用户做出选择时触发相应的处理函数。jQuery则简化了这些操作,提供了更简洁的语法,如`$('#...
在“asp简单的select级联菜单带数据库”的场景中,我们主要关注的是如何利用ASP技术实现HTML中的<select>元素的级联效果,并且这些下拉菜单的数据来源于数据库。 首先,`dingdan.asp`可能是主页面,它包含用户界面...
一个简单html页面,实现省市的三级级联选择,根据不同情况可以控制不同展现。
### JSP实现级联菜单详解 #### 一、概述 ...这种方法不仅适用于简单的省份-城市选择器,还可以扩展到更复杂的多级选择器中。开发者可以根据具体需求调整和优化实现细节,以满足不同应用场景的需求。
Oracle数据库中的级联查询、级联删除和级联更新是数据库设计中常用的操作,它们用于在多表关联的关系型数据库中实现数据的联动处理。在Oracle中,这些操作主要涉及外键约束和触发器。 首先,级联查询是通过自连接来...
一个简单的级联操作,可无限进行级联,根据当前下拉框选中的值,通过ajax请求,到后台看当前节点是否有下子节点,在返回json对象,在通过判断json数据的长度来判断是否显示出下一个下拉框和下拉框的值,对一些新手很...
4. 如果需要动态加载数据,可以使用layui的异步请求方法,结合xm-select的回调函数进行数据绑定。 值得注意的是,xm-select的源码设计灵活,支持自定义模板,开发者可以根据项目需求定制下拉选项的展示样式。此外,...
4. **动态更新**:收到服务器响应后,使用jQuery的DOM操作方法,如`html()`或`append()`,更新下一级别的下拉菜单。如果是在三级级联中,这一步会在二级选择改变后进行,以反映出正确的三级选项。 5. **错误处理**...
2. **事件监听**:使用JavaScript的`addEventListener`方法监听第一个`<select>`的`change`事件。当用户在第一个下拉菜单中选择了一个选项,就会触发这个事件。 3. **数据结构**:为了动态加载第二个下拉菜单的内容...
这通常涉及到DOM操作,例如使用`document.getElementById`或`querySelector`来获取DOM元素,然后用`innerHTML`或`appendChild`等方法来修改其内容。 博文链接中提到的iteye博客文章可能提供了具体的代码实现,但...
2. DOM操作:插件通过jQuery的DOM操作方法(如`append()`、`html()`等)动态创建并插入HTML元素,展示出级联选择的效果。 3. 事件监听:插件监听用户的选择行为,如点击事件,当用户选择某一选项时,触发相应级别的...
在创建级联下拉时,我们可能会使用这些选择器来获取或操作包含城市数据的`<select>`元素。 接下来,我们关注事件处理。在级联下拉中,当用户选择一个省份时,对应的市列表应该动态更新。这可以通过监听`change`事件...
以下是一个简单的jQuery + AJAX实现级联下拉框的示例: ```html <select id="parentSelect"></select> <select id="childSelect"></select> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></...
在这个场景下,"级联插件"指的是用于实现多级选择效果的工具,常见于下拉选择框(Select)的交互设计中。这种插件能够帮助用户在多个关联的下拉菜单中进行逐级选择,如国家-省份-城市这样的层级关系,或者类别-子...
实现级联下拉框效果,我们通常需要两个或多个`<select>`元素,并通过JavaScript监听第一个下拉框的`change`事件。当用户更改选择时,触发事件处理函数,根据选定的值动态更新第二个下拉框的选项。 以下是一个简单的...
级联选择通常由一系列的下拉框(select元素)组成,这些下拉框之间通过JavaScript进行联动。当用户在一个下拉框中选择一个选项时,JavaScript会根据预定义的数据关系更新下一个下拉框的选项。这种联动效果可以提高...
这是一个用JavaScript写的年,月,日的日期级联select。代码简单明了,易读易用。
这是一个基础的级联下拉列表实现,对于更复杂的需求,例如异步加载数据、多级级联等,可能需要引入更高级的库,如jQuery UI的`selectmenu`插件或现代前端框架(如React、Vue、Angular)中的组件库。不过,这个简单的...
本示例“超简单的级联下拉框例子”采用了一种独特且简洁的实现方法,旨在减少代码量,提高可读性,并避免使用数组。数组通常用于存储级联选项的数据,但在这个例子中,开发者可能采用了另一种数据结构或者直接在HTML...