下拉框onclick事件，默认选项不响应

今天发现一个很奇怪的问题，在用下拉框onclick事件时，如果是默认选项的话，onclick不响应。做了个简单的例子，页面中有一个下拉框，两个复选框。下拉框中有all, a, b三种选择，点击all选中两个复选框，点击a选中复选框a, 点击b选中复选框b。测试时如果一开始只点击下拉框内的a或者b选项，没问题; 点了a（或b）后再点all也没问题。但是如果一开始就点all的话(此时all是默认选项），不响应。或者先点a,然后手动把复选框b勾上，再点a(此时a是默认选项),也不响应。请问是我的code有什么不对的地方吗？ >_< 还是有什么其他可以避免这个问题的办法呢？谢谢赐教了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE> New Document </TITLE>
        <script language="JavaScript" type="text/javascript">
            function getChange(){
                var v = document.getElementById('choice')
                var n = document.getElementsByName('all');
                for(i=0;i<n.length;i++){
                            document.getElementsByName('all')[i].checked=false;}
                switch(v.value){
                    case ('all'):
                        for(i=0;i<n.length;i++)
                            document.getElementsByName('all')[i].checked=true;
                        break;
                    case('a'):
                        document.getElementById('a').checked=true;
                        break;
                    case('b'):
                        document.getElementById('b').checked=true;
                        break;
                }
            }
        </script>
    </HEAD>    <BODY>
        <SELECT id="choice" onChange="getChange()">
            <OPTION VALUE="all">all</OPTION>
            <OPTION VALUE="a">a</OPTION>
            <OPTION VALUE="b">b </OPTION>
        </SELECT>    <br><input type="checkbox" name="all" id="a">a
    <br><input type="checkbox" name="all" id="b">b    </BODY>
</HTML>

解决方案 »

  1.   

    onchange()事件是在下拉列表框的值发生改变时才触发的，默认是all时点all，下拉列表的值没有发生改变，所以不会触发onchange()事件，本来选择的是a，再点a选项，也是同样的情况。
      

  2.   

    onChange 只会在值改变时才会触发。
    楼主可以考虑加上 onblur="getChange()"
      

  3.   

    现在想了想，是不是因为下拉框只能是onchange事件，而且像我这样的话，点了a之后再点a,由于事实上没有change，所以就没有响应了可是这样就达不到我最初想要的效果了，请问有什么解决的办法吗？
      

  4.   

    或者先点a,然后手动把复选框b勾上，再点a(此时a是默认选项),也不响应。
    onChange当然不会响应 。因为它选项没有发生改变 。
    你换成onclick 看看 。
      

  5.   

    谢谢LS两位这么快的回复，看来我的考虑是对的，我这就试试onblur="getChange()" =D
      

  6.   

    还有，下拉列表的默认值是all，所以，应该给复选框a、b加上默认值checked="checked"。
      

  7.   

    汇报一下，改成onblur或者onclick都还是不好使~
      

  8.   

    谢谢你，这一点我的确没有考虑到，疏忽了。看来应该加个None选项，这样会合理一些。
      

  9.   

    根据7楼的意见，小小的改了下code,变得合理了一些。但是还是不太懂应该怎样解决之前的那个问题。
    onChange应该是我用的有点问题，就像ls说的那样，如果选择没有变得话，自然也就不会有响应了。可是刚刚试着换成onblur或者onclick也不行。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
        <HEAD>
            <TITLE> New Document </TITLE>
            <script language="JavaScript" type="text/javascript">
                function getChange(){
                    var v = document.getElementById('choice')
                    var n = document.getElementsByName('all');
    for(i=0;i<n.length;i++){
                                document.getElementsByName('all')[i].checked=false;}                switch(v.value){
                        case ('all'):
                            for(i=0;i<n.length;i++)
                                document.getElementsByName('all')[i].checked=true;
                            break;
                        case('a'):
                            document.getElementById('a').checked=true;
                            break;
                        case('b'):
                            document.getElementById('b').checked=true;
                            break;
        default:
                    }
                }
            </script>
        </HEAD>    <BODY>
            <SELECT id="choice" onChange="getChange()">
        <OPTION VALUE="none">none</OPTION>
                <OPTION VALUE="all">all</OPTION>
                <OPTION VALUE="a">a</OPTION>
                <OPTION VALUE="b">b </OPTION>
            </SELECT>    <br><input type="checkbox" name="all" id="a" >a
            <br><input type="checkbox" name="all" id="b" >b    </BODY>
    </HTML>
      

  10.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
        <HEAD>
            <TITLE> New Document </TITLE>
            <script language="JavaScript" type="text/javascript">
                function getChange(){
                    var v = document.getElementById('choice')
                    var n = document.getElementsByName('all');
                    for(i=0;i<n.length;i++) document.getElementsByName('all')[i].checked=false;
                    switch(v.value){
                        case ('all'):
                            for(i=0;i<n.length;i++)
                                document.getElementsByName('all')[i].checked=true;
                            break;
                        case('a'):
                            document.getElementById('a').checked=true;
                            break;
                        case('b'):
                            document.getElementById('b').checked=true;
                            break;
                    }
                }
            </script>
        </HEAD>    <BODY>
            <SELECT id="choice" onChange="getChange()">
            <OPTION VALUE="none">none</OPTION>
                <OPTION VALUE="all">all</OPTION>
                <OPTION VALUE="a">a</OPTION>
                <OPTION VALUE="b">b </OPTION>
            </SELECT>    <br><input type="checkbox" name="all" id="a" >a
            <br><input type="checkbox" name="all" id="b" >b    </BODY>
    </HTML>
      

  11.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
        <HEAD>
            <TITLE> New Document </TITLE>
            <script language="JavaScript" type="text/javascript">
                function getChange(){
                    var v = document.getElementById('choice')
                    var n = document.getElementsByName('all');
                    for(i=0;i<n.length;i++) document.getElementsByName('all')[i].checked=false;
                    switch(v.value){
                        case ('all'):
                            for(i=0;i<n.length;i++)
                                document.getElementsByName('all')[i].checked=true;
                            break;
                        case('a'):
                            document.getElementById('a').checked=true;
                            break;
                        case('b'):
                            document.getElementById('b').checked=true;
                            break;
                    }
                }
            </script>
        </HEAD>    <BODY>
            <SELECT id="choice" onChange="getChange()">
            <OPTION VALUE="none">none</OPTION>
                <OPTION VALUE="all">all</OPTION>
                <OPTION VALUE="a">a</OPTION>
                <OPTION VALUE="b">b </OPTION>
            </SELECT>    <br><input type="checkbox" name="all" id="a" >a
            <br><input type="checkbox" name="all" id="b" >b    </BODY>
    </HTML>
      

  12.   

    你写的代码逻辑上有点问题，switch()语句写在for()循环体内了。
      

  13.   


    恩？switch在for的下面呢，我switch上面的那个for打上了花括号，作用是把当前checkbox的勾去除掉。
      

  14.   

    还有，html4实在太老了，赶紧转换到xhtml吧。
      

  15.   

    那干脆就用onchange事件处理好了，给两个checkbox控件都加上disabled属性禁用的了。
      

  16.   


    恩，没错，你说的这个办法对主贴里的小例子完全管用。可是问题是，其实我在做一个邮箱，这个功能是为了加上去让用户可以方便的选择多个邮件，就像gamil的那样似得。如果把邮件前面的checkbox禁用了就会影响其他的功能了。为难的挠头ing...
      

  17.   

    onclick="getChange()" 不好用？
      

  18.   

    哎呀，囧了，突然发现onclick可以了，莫非是我之前试的时候单词拼错了？瀑布汗不好意思哈，结贴了 =P
      

  19.   

    我也是试了onclick的 。发现没什么问题 ，才没有回复的  。