是否有可以分配給按鈕的 onClick function - 導致在其他地方的下拉菜單中選擇一個選項？

Question

我在這里有一個搜索和過濾表單（請參閱帖子網格的頁面頂部）：

https://ba2018.wpengine.com/sf-test-side

名為“Boligtype”的表單的第二個字段是一個允許多項選擇的下拉菜單。

我想在同一頁面的其他地方（搜索和過濾表單之外）創建一個按鈕 - 單擊該按鈕會激活上述下拉列表中的“別墅”選項。

我是 js 的新手，所以我自己嘗試了一些不同的選項，但可以肯定的是，它們已經很遠了。 我只知道我需要一個“onClick”事件，在這里和谷歌上研究文章。 但是我對 js 還是很陌生，所以真的不知道從哪里開始：

<button onclick="myFunction()">Villas</button>

<script>
function myFunction() {

}
</script>

Answer 1

您可以找到元素並觸發click事件（或您正在收聽的任何事件）。

function myFunction() {
  const select = document.querySelector('#mySelect'); // Find element
  select.click(); // Click element
  // If you are not listening to click or need a different event
  const event = new Event('customEvent');
  select.dispatchEvent(event);
}

使用您的特定頁面，您似乎正在收聽label

document.querySelector('.sf-field-post-meta-filter_boligtype > label').dispatchEvent(new Event('click'))

Answer 2

這是一個簡單的示例，顯示了如何通過單擊按鈕在選擇的下拉列表中創建第一個選項：


<!Doctype html>
<html>

<head>
<script>
function buttonClick(){
document.getElementById("first").selected = true;
}
</script>

</head>

<body>

<select id="stateSelect" name="stateSelect">
    <option value="none" id="first">first option</option>
    <option value="AL">second option</option>
    <option value="AK">third option</option>
</select>

<button type="button" onclick="buttonClick();" id="button"> click me!</button>

</body>

</html>

我們使用onclick=""屬性向按鈕添加事件偵聽器，因此 function buttonClick(); 將被調用並激活第一個 select 選項，因此您可以根據需要進行任何選項。

Answer 3

如果這解決了您的問題，我將對此進行解釋。

 function myfunction(value) { console.log(value); switch (value) { case "hotel": alert("hotel"); // $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap $('#mybutton').attr('hidden', true); break; case "villa": alert("villa"); // $('#mybutton').removeClass("d-none"); //you can add this if you are using bootstrap $('#mybutton').removeAttr('hidden'); break; case "test": alert("test"); // $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap $('#mybutton').attr('hidden', true); break; default: alert("nulll"); // $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap $('#mybutton').attr('hidden', true); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form"> <div class="form-group"> <label for="exampleFormControlSelect1">Example select</label> <select class="form-control" id="exampleFormControlSelect1" onchange="myfunction(this.value)"> <option value="hotel">hotel</option> <option value="villa">villa</option> <option value="test">test</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div> <button id="mybutton" class="btn btn-primary" hidden>Click the Villa option</button>

是否有可以分配給按鈕的 onClick function - 導致在其他地方的下拉菜單中選擇一個選項？

問題描述

3 個解決方案

解決方案1
0 2019-10-11 14:28:37

解決方案2
0 2019-10-11 14:37:13

解決方案3
0 2019-10-11 15:38:14

是否有可以分配給按鈕的 onClick function - 導致在其他地方的下拉菜單中選擇一個選項？

問題描述

3 個解決方案

解決方案1 0 2019-10-11 14:28:37

解決方案2 0 2019-10-11 14:37:13

解決方案3 0 2019-10-11 15:38:14

解決方案1
0 2019-10-11 14:28:37

解決方案2
0 2019-10-11 14:37:13

解決方案3
0 2019-10-11 15:38:14