基於下拉的Onclick按鈕href

Question

前提：

在此特定示例中，我試圖在下拉菜單中進行選擇，並使用與#panel_link_library中進行的選擇相關的任何值來更改下面提到的onclick()處理程序中的關鍵字'something' 。 希望這有意義嗎？

到目前為止的代碼：

 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獲取dropdown元素
• 然后，我們將該元素選擇為元素，並從中讀取其value屬性
• 然后使用它設置為瀏覽器導航到的新位置

Answer 2

在onclick函數上更改位置，然后您可以獲取保管箱值並重定向用戶。

希望這就是您想要的。 如果需要，很高興為您解釋或提供更好的解決方案。

 var aaa = document.getElementById('panel_link_library'); function goToSomewhere() { window.location.href= aaa.value; } 

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

Answer 3

您正在嘗試將href分配給div。 將其分配給onclick處理程序。

var aaa = document.getElementById('panel_link_library');
  aaa.onchange = function (e) {
    console.log(e);
    var abc = document.getElementById("abc");
    abc.addEventListener('click', () => {window.location = e.target.value});
  }