页面的<div>怎么按要求显示隐藏

Question

<select id="xh" name="xh" style="width:120px">
                        <option value="1">球团</option>
                        <option value="2">白灰</option>
                        <option value="3">白云石</option>
</select>
    <div id="qiut" class="qiut">
球团
    </div>
    <div id="baih" class="baih">
白灰   
    </div>
    <div id="baiys" class="baiys">
白云石
    </div>[code=JScript]
$(document).ready(function() {
        
        $('#div').qiut.show();
        $('#div').baih.hide();
        $('#div').baiys.hide();
        $('#xh').onblur(function() {
            var xh = $(this).value;
            if (xh == 1) {
                $('#div').qiut.show();
                $('#div').baih.hide();
                $('#div').baiys.hide();            }
            if (xh == 2) {
                $('#div').qiut.hide();
                $('#div').baih.show();
                $('#div').baiys.hide();            }
            if (xh == 3) {
                $('#div').qiut.hide();
                $('#div').baih.hide();
                $('#div').baiys.show();            }
        })
    });
[/code]代码大概是这样的,中间的东西我省了些,不过主要部分的有了吧 ,但是怎么不能实现那个功能呢,根据我的<select>对应显示页面的相应的部分

Answer 1

$('#xh').onblur()这个事件选择不好.在选择后还要把焦点移到其它地方才能触发到.
应该在onchange()或者onpropertychange事件中去处理.

Answer 2

而且.onblur()时,如果在SELECT里连续改变选项,也不会相应发生改变,因为没有blur,这就让用户困惑了.

Answer 3

那我不用change或者blur 把这个判断放到个按钮的方法里面行么?关键是现在页面打开的时候就没有隐藏,三部分都显示出来了啊