两个 select 联动的一种实现方式
来源：互联网 发布：电子鼓软件 编辑：程序博客网 时间：2024/05/03 16:14
今天 帮朋友写的，联动的方式有很多，写这个的时候主要考虑，让服务端来做更多的工作，作为示例 test方法只有6行代码，浏览器的执行速度应该是非常快的，而且也不占浏览器的内存，最近写javascript，经常遇到性能问题，所以从现在起就的注意了
下面的代码比较简单，实际上依赖一个命名规则和克隆对象的方法，克隆其实不是必要的，但我觉得这样很真观。如果数据量大的话可以不克隆直接隐藏显示就可以了，后台做下简单的逻辑判断。
<html>
<head>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function test(){
var eChild=$('child_'+$("parent").value).cloneNode(true);
eChild.name="child";
eChild.style.display="";
eChild.value="c2"
$("cspan").innerHTML="";
$("cspan").appendChild(eChild);
}
function init(){
test()
}
</script>
</head>
<body onload="init();">
<%=request.getParameter("child")%>
<form method="post">
<select id="parent" onchange="test();">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<span id="cspan"></span>
<select id="child_1" style="display: none;">
<option value="c1">ca_a</option>
<option value="c2">cb_a</option>
<option value="c3">cc_a</option>
</select>
<select id="child_2" style="display: none;">
<option value="c1">ca_b1</option>
<option value="c2" selected>cb_b2</option>
<option value="c3">cc_b3</option>
</select>
<select id="child_3" style="display: none;">
<option value="c1">ca_c</option>
<option value="c2">cb_c</option>
<option value="c3">cc_c</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
<head>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function test(){
var eChild=$('child_'+$("parent").value).cloneNode(true);
eChild.name="child";
eChild.style.display="";
eChild.value="c2"
$("cspan").innerHTML="";
$("cspan").appendChild(eChild);
}
function init(){
test()
}
</script>
</head>
<body onload="init();">
<%=request.getParameter("child")%>
<form method="post">
<select id="parent" onchange="test();">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<span id="cspan"></span>
<select id="child_1" style="display: none;">
<option value="c1">ca_a</option>
<option value="c2">cb_a</option>
<option value="c3">cc_a</option>
</select>
<select id="child_2" style="display: none;">
<option value="c1">ca_b1</option>
<option value="c2" selected>cb_b2</option>
<option value="c3">cc_b3</option>
</select>
<select id="child_3" style="display: none;">
<option value="c1">ca_c</option>
<option value="c2">cb_c</option>
<option value="c3">cc_c</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
- 两个 select 联动的一种实现方式
- 实现两个select之间的两极联动
- Jquery-select-处理二级联动的一种简单方式
- php 实现两个select下拉框的数据联动
- 两个select来回联动
- android 联动listview 的一种不太健康的实现方式
- 实现select菜单联动的javascript方案
- 利用XMLHTTP实现的二级联动Select
- 两个下拉框的联动功能实现
- js实现两个radio的联动
- 如何实现两个ViewPager的联动
- 实现两个HorizontalView的水平联动
- MVC的一种实现方式
- hotfix 的一种实现方式
- select的联动
- layui的select联动
- select 联动菜单实现代码
- select菜单实现二级联动
- ARM系统设计JTAG接口详细图解（转）
- javascript页面蒙板,Msgbox,CSDN 的dialog类,源码
- VC++6.0中内存泄漏检测
- 几道熟悉的面试题
- 老师说：今年寒假不休息……
- 两个 select 联动的一种实现方式
- 关于用#include文件和#ifndef，#define防止文件被重复包含
- 以IT民工的名义，我经济条件改善了很多很多，却发现越发穷苦的趋势出来了...月光的雏形已经显现，怨念。。
- JavaScript定制弹出对话框（详解）
- 推荐几本Java好书
- 下雪了
- MySQL 参考手册 以及MySQL下载网址:
- 使用 Apache OpenJPA 开发 EJB 3.0 应用- 处理实体生命周期事件的回调
- Java中Timer的使用
