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

Question

小弟在做一个效果，就是选择了 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 进去？是否太麻烦？ 恳请好心人指点迷津啊```

Answer 1

这种联动,不必每次都到服务端去取数据,能够固化到本地就固化,或者第一次获取后就缓存起来用jquery,对每个select的onchange, bind个function, 获取另外一个select里的值和当前select里的option值, 动态匹配即可直接html()即可,不必先清空,再append

Answer 2

<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>

Answer 3

给你一种简单的实现思路
在A的每个option中添加一个tag，如：
<option value='2' flag='二'>2</option>在B的每个option中添加一个tag，如：
<option value='二' flag='2'>二</option>每次一个改变之后你就可以得到当前选中项的flag就是另外一个下拉框的值，你在根据这个值，遍历一下option，把对应的选中就ok啦，至于清空什么的很简单，你自己弄啦