javascript - 基于下拉的Onclick按钮href

前提：

在此特定示例中，我尝试在下拉菜单中进行选择，并使用与在'something'中进行的选择相关联的任何值来更改下面提到的onclick()处理程序中的关键字#panel_link_library。希望这有意义吗？

到目前为止的代码：

var aaa = document.getElementById('panel_link_library')
aaa.onchange = function() {
  document.getElementById("abc").href = this.value
}

<div class="dropdown-plans">
  <select id="panel_link_library" name="p_links">
        <option value="/pages/home_up/">Location 1</option>
        <option value="www.google.com">Location 2</option>
        <option value="https://321.com">Location 3</option>
    </select>
</div>
<div id="abc" class="panel_link" onclick="location.href='something'">Jump to location</div>

最佳答案

解：

您的onclick只需要读取选择的值！

const navToSelection = _ => {
  const el = document.getElementById("panel_link_library")
  const val = el.options[el.selectedIndex].value
  window.location.href = val // That's it!
}

<div id="abc" class="panel_link" onclick="navToSelection()">Jump to location</div>

说明：


我们首先通过id = panel_link_library获取dropdown元素
然后，我们将该元素选择为元素，并从中读取其value属性
然后使用它设置为浏览器导航到的新位置