列表框选中的项目按钮单击从值打开 link

Question

我正在尝试为 Safari 浏览器创建一个扩展，它将添加一个带有几个 link 列表框和一个按钮的栏 (.html)。当我单击按钮时，列表框中的所选项目（例如 link）将在新选项卡中打开。

如果选择项目 Microsoft 并且用户单击按钮打开它将打开 www.microsoft.com 在新标签页中。

我已经尝试使用下面的两个函数 selectedLink，但似乎都不起作用。不过我可能做错了。

另一个函数 openInTab 是必需的，因为我正在使用 Safari 扩展，以防有人想知道为什么我不使用 window.open。

<html>
<head>
  <title>Links</title>
  <select id="selectbox" name="" onchange="selectedLink(this);" ;>
    <option value="https://www.google.com" selected>Google</option>
    <option value="https://www.microsoft.com">Microsoft</option>
    <option value="https://www.apple.com">Apple</option>
  </select>
  <button onclick="openInTab(pSelect);">Open</button>
  <script type="text/javascript">
    function selectedLink(getLink) {
      var pSelect = getLink.value;
    }

    function selectedLink(getLink) {
      var selectIndex = getLink.selectedIndex;
      var selectValue = getLink.options[selectIndex].text;
      var pSelect = selectValue;
    }

    function openInTab(source) {
      var newTab = safari.self.browserWindow.openTab();
      newTab.url = source;
    }
  </script>
</head>
</html>

Returns:

ReferenceError: Can't find variable: pSelect

Answer 1

您不需要在函数中传递它。只需使用 select 元素的 id 即可获得 selected 值。

尝试以下方式：

function openInTab() {
  var pSelect = document.getElementById('selectbox').value;
  console.log(pSelect)
  //var newTab = safari.self.browserWindow.openTab();
  //newTab.url = pSelect;
}

<html>
<head>
  <title>Links</title>
  <select id="selectbox" name="";>
    <option value="https://www.google.com" selected>Google</option>
    <option value="https://www.microsoft.com">Microsoft</option>
    <option value="https://www.apple.com">Apple</option>
  </select>
  <button onclick="openInTab();">Open</button>
  <script type="text/javascript">
    
  </script>
</head>
</html>

Answer 2

试试这个。如果你想使用

var newTab = safari.self.browserWindow.openTab();
newTab.url = source;

那就继续吧。我所做的只是为了解决您的 pSelect 错误并获取所需的变量。

function openInTab() {
      var source = document.getElementById('selectbox').value;
      console.log(source);
      var newTab = window.open(source, '_blank');
    }

<html>
<head>
  <title>Links</title>
  <select id="selectbox">
    <option value="https://www.google.com" selected>Google</option>
    <option value="https://www.microsoft.com">Microsoft</option>
    <option value="https://www.apple.com">Apple</option>
  </select>
  <button onclick="openInTab();">Open</button>
</head>
</html>

列表框选中的项目按钮单击从值打开 link

Listbox selected item button click open link from value

javascript

listbox

safari-extension