本文介绍了一种通过服务端处理来减轻浏览器负担的联动选择器实现方法。该方法仅需少量JavaScript代码，在用户更改父级选项时，快速显示相应的子级选项，同时避免了不必要的内存占用。
今天 帮朋友写的，联动的方式有很多，写这个的时候主要考虑，让服务端来做更多的工作，作为示例 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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
