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

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.

现在,当用户选择Option-1,Option-2 OR Option-3时,该按钮变为活动状态,并在单击时链接到website-1.com。

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

但是当用户选择Option-X时,该按钮变为活动状态,并在单击时链接到website-2.com。

2 个解决方案

#1

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

使用以下代码...我相信您需要HTML / Javascript代码

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

注意:我使用了3个按钮。

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.

第3个按钮不会先显示。选择选项后,它会来。

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

第3个按钮符合您的要求。但是如果你想选择那种方法我还增加了两个

Let me know if you have any queries.

如果您有任何疑问,请告诉我。

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

关于FF和IE问题,请参见此处的示例。此示例适用于FF和IE。

Good Luck!!! Cheers!!!

祝好运!!!干杯!!!

#2

Your lack of code in the question warrants lack of code in the response.

您在问题中缺少代码需要在响应中缺少代码。

You will, however, want to set the onchange event of the select element.

但是,您将要设置select元素的onchange事件。

#1