douhulao7642 2012-01-20 18:45
浏览 34
已采纳

当选择下拉列表项时,按钮变为可单击

Can you help me with the code of the following?

I have a drop-down list of items.

  • Option-1
  • Option-2
  • Option-3
  • Option-X

Below the drop-down list is a button that is initially inactive (grayed out)

Now when the user selects Option-1, Option-2 OR Option-3 the button becomes active and links to website-1.com when clicked.

But when the user selects Option-X the button becomes active and links to website-2.com when clicked.

  • 写回答

2条回答 默认 最新

  • doubi9999 2012-01-20 19:59
    关注

    Use Below Code... I believe you need HTML/ Javascript code

    <html>
    <script language="javascript">
    var myLink = "";
    function hideMe() {
        document.getElementById('btn3').style.visibility='hidden';
    }
    function setMyAdd() {
        location.href=myLink;
    }
    function checkForChange() {
        document.getElementById('btn1').style.visibility='visible';
        document.getElementById('btn2').style.visibility='visible';
        var buttonSelected=selList.value;
        // alert("Option Selected is : " + buttonSelected );
        if (buttonSelected=="optx") {
        myLink = "myPage2.html";
        document.getElementById('btn1').style.visibility='hidden';
        document.getElementById('btn2').style.visibility='visible';
        document.getElementById('btn3').style.visibility='visible';
        } else {
        myLink = "myPage1.html";
        document.getElementById('btn1').style.visibility='visible';
        document.getElementById('btn2').style.visibility='hidden';
        document.getElementById('btn3').style.visibility='visible';
        }
    }
    </script>
    <body onLoad="hideMe()">
    <form>
    <select onChange="checkForChange()" id="selList">
        <option value="opt0" selected>Choose Option</option>
        <option value="opt1">Option 1</option>
        <option value="opt2">Option 2</option>
        <option value="opt3">Option 3</option>
        <option value="optx">Option X</option>
    </select>
    <BR><br>
    <input type="button" value="Option 1,2,3" id="btn1">
    <BR>
    <input type="button" value="Option X" id="btn2">
    <BR>
    <input type="image" value="Click me" src="SR_@_Indian_GP.jpg" width=100 height=100 id="btn3" onClick="setMyAdd(); return false;">
    </form>
    </body>
    </html>
    

    Note: I have used 3 buttons.

    First two buttons will be displayed already on page and then we will hide it.

    3rd button not displayed first. After selecting option it will come.

    3rd button is as per your requirement. BUT I have added additional two incase if you want to choose that method

    Let me know if you have any queries.

    Regarding FF and IE Issue, see example here. This example works in FF and IE both.

    Good Luck!!! Cheers!!!

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部