访问按钮上的选定链接

Posted 2023-03-05

【中文标题】访问按钮上的选定链接

【英文标题】：Visit selected link on button

【发布时间】：2014-05-09 14:13:13

【问题描述】：

如何在新窗口中从外部按钮的下拉列表中访问选定的链接？

<select id="atheist">
    <option value="http://google.com"></option>
    <option value="http://yahoo.com"></option
</select>

var select = document.getElementById("select");
select.addEventListener("change",function()  
    var win = window.open(this.value, "_blank");
    win.focus();
,false);

所以，我试图通过单击按钮从下拉列表中访问/转到选定的链接。你能帮忙吗？

【参考方案1】：

我在这里假设您要选择站点并希望在单击下载按钮后打开该站点。

HTML

<select id="select">
    <option value="http://google.com">google</option>
    <option value="http://yahoo.com">yahoo</option>
</select>
<button id="myButton">Download</button>

JS

var button = document.getElementById("myButton");
button.addEventListener("click", function()  
    var select = document.getElementById('select');
    var win = window.open(select.options[select.selectedIndex].value, "_blank");
    win.focus();

,false);

DEMO

【讨论】：

这不会打开新标签/窗口

@RUJordan，现在可以了吗？

感谢您的回答。您能否告诉我如何访问下载按钮上的选定链接，而不是单击选择列表时。

@user3477508，您想在单击带有选定特定站点的下载按钮后访问页面吗？

@SumanBogati 因为你没有回答这个问题。这仍然会运行更改事件，而不是从按钮触发的事件。

【参考方案2】：

jsFiddle Demo

HTML

<select id="atheist">
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>

<input id="downloadbtn" type="button" value="download" />

JS

function openLink()
    var e = document.getElementById("atheist").value;
    console.log(e);
    var win = window.open(e, "_blank");
    win.focus();


window.onload=function()
    var downloadbtn = document.getElementById("downloadbtn");
    downloadbtn.onclick=openLink;
;

---

addEventListener Method jsFiddle

JS

function openLink()
    var e = document.getElementById("atheist").value;
    var win = window.open(e, "_blank");
    win.focus();


window.onload=function()
    var downloadbtn = document.getElementById("downloadbtn");
    downloadbtn.addEventListener("click", openLink, false);
;

---

这类似于以下内容：inputing text in textbox

【讨论】：

感谢您的回答。您能否告诉我如何访问下载按钮上的选定链接，而不是单击选择列表时。

你不应该提倡内联javascript。这是不好的做法。

@RUJordan 同意，只是想快速提供帮助。我的不好，改变了我的答案，我希望它更符合你的标准。

@user3477508 为下载按钮添加更改

@abc123 我不会 +1，因为我不喜欢这个重复问题的 OP（对你来说不是私人的）——但现在很好。请注意，.onclick 与 addEventListener 表示现在只能附加 1 个事件。但它有效