javascript - 基于下拉的onclick按钮href

Question

前提:

在这个特定示例中，我尝试在下拉菜单中进行选择并更改关键字 '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>

Answer 1

解决方案:

您的 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 获取下拉元素
• 然后我们得到那个元素 selected 元素，并从中读取它的 value 属性
• 然后使用它设置为您的浏览器导航到的新位置