使用数据列表打开新标签页

时间:2019-01-23 07:33:46

标签: javascript html select datalist

我正在尝试从数据列表创建链接,单击另一个“转到”按钮将在新选项卡或窗口中打开该链接。

我看到了类似的脚本,但仅适用于Select:

<select name="choice" id="choice">
    <option value="http://publish.samsungsimulator.com/simulator/1fca0505-cf2e-4f42-ac96-e1cf1ed7b65a/">Samsung Galaxy S9</option>
    <option value="http://publish.samsungsimulator.com/simulator/5279d684-ff3f-4aae-97a6-ecf8e79015d9/">Samsung Galaxy S9+</option>
    <option value="http://publish.samsungsimulator.com/simulator/2c80206c-042a-4e90-9594-6bd72a8bd3bf/">Samsung Galaxy Note 9</option>
</select>
    <input type="button" name="go_button" id= "go_button" value="Go"   onclick="go_to_the_link()"/>
<script>
function go_to_the_link(){
    var element = document.getElementById("choice");
    var link = element.value;
    myWindow = window.open(link,"_blank");
}
</script>

是否可以使用其他JavaScript将其应用于数据列表?

谢谢

1 个答案:

答案 0 :(得分:0)

要在新选项卡中打开链接,可以使用此功能。注意:仅在互动(如click)之后才能在页面加载时起作用

cons samsungSelect = document.getElementById('choice')

function openLinkInNewTag() {
  let aTag = document.createElement("a")
  aTag.href = samsungSelect.value
  aTag.target = "_blank"
  document.body.appendChild(aTag)
  aTag.click()
  document.body.removeChild(aTag)
}

演示:https://codepen.io/quic5/pen/zexLMd