Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
418 views
in Technique[技术] by (71.8m points)

javascript - onChange and onSelect in DropDownList

I have a DropDownList that asks the user if he want to join the club:

Do you want to join the club
Yes
No

Under this list there is another list that is set to disabled as a default. This list has the departments of the club. This list will not be enabled until the user chooses Yes.

I built the following code but the problem that I couldn't solve is let's assume the user chooses Yes then he changes his decision so he will choose No again. In this case the list of the departments still enabled. I want it to be disabled when he chooses No again.

<html>
    <head>
        <script type="text/javascript">
            function disable()
            {
                document.getElementById("mySelect1").disabled=true;
            }
            function enable()
            {
                document.getElementById("mySelect1").disabled=false;
            }
        </script>
    </head>
    <body>
        <form>
            <select id="mySelect" onChange="enable();">
                <option onSelect="disable();">No</option>
                <option onSelect="enable();">Yes</option>
            </select>
            <select id="mySelect1" disabled="disabled" >
                <option>Dep1</option>
                <option>Dep2</option>
                <option>Dep3</option>
                <option>Dep4</option>
            </select>
        </form>
    </body>
</html>

I thought that onSelect="disable();" would solve the problem but it still doesn't work.

Thanks

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I'd do it like this jsFiddle example.

JavaScript:

function check(elem) {
    document.getElementById('mySelect1').disabled = !elem.selectedIndex;
}

HTML:

<form>
    <select id="mySelect" onChange="check(this);">
        <option>No</option>
        <option>Yes</option>
    </select>

    <select id="mySelect1" disabled="disabled" >
        <option>Dep1</option>
        <option>Dep2</option>
        <option>Dep3</option>
        <option>Dep4</option>
    </select>
</form>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...