javascript 实现下拉列表选值动态改变

小弟在做一个效果，就是选择了 A 下拉框的值， B 下拉框的选择值会自动改变 (注意是选值)

同理，下拉框 B 的值的改变也会引起 A 中所选值的变化

简单的例子

A 中有 1,2,3,4
B 中有一，二，三，四

A 选 2 时，B 中显示二被选择
B 选四时，A 中显示 4 被选择

（请注意，这个 jsp 页面因为从 servlet 中获取了一些 attribute 值，所以不能随便刷新

另外，两个下拉框中的选项内容也是由数据库 --> servelet --> jsp 的...）

小弟不才，几个尝试都不理想：
1.  直接用简单的 javascript 实现后，发现其实是每次 onchange() 函数都刷新了页面，不可取
2.  用 Ajax, 可局部刷新获得了其中一个下拉框的选值，但静不知如何在 processRequest() 中将另一个下拉框的指定设   为选定状态
3.  用 Jquery,不是很熟，但选中其中一个值后，需将另一个下拉框的选项清空，再逐个 append 进去？是否太麻烦？

恳请好心人指点迷津啊```

5 个解决方案

#1

这种联动,不必每次都到服务端去取数据,能够固化到本地就固化,或者第一次获取后就缓存起来

用jquery,对每个select的onchange, bind个function, 获取另外一个select里的值和当前select里的option值, 动态匹配即可

直接html()即可,不必先清空,再append

#2

主要就是onchange事件了

#3

<select id="s1" onchange="toChange(this, 's2');">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
<select id="s2" onchange="toChange(this, 's1');">
<option value="0">一</option>
<option value="1">二</option>
<option value="2">三</option>
<option value="3">四</option>
</select>
<script type="text/javascript">
function toChange(obj, id){
document.getElementById(id).value = obj.value;
}
</script>

#4

给你一种简单的实现思路
在A的每个option中添加一个tag，如：
<option value='2' flag='二'>2</option>

在B的每个option中添加一个tag，如：
<option value='二' flag='2'>二</option>

每次一个改变之后你就可以得到当前选中项的flag就是另外一个下拉框的值，你在根据这个值，遍历一下option，把对应的选中就ok啦，至于清空什么的很简单，你自己弄啦

#5

引用 3 楼 zhangshaolongjj 的回复:

<select id="s1" onchange="toChange(this, 's2');">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
<select id="s2" on……

实在是太牛了, 代码简单, 思路清晰

低调的高手啊

谢谢啦, 向你学习！

#1

#2