Jquery / Javascript如何根據下拉菜單中的select選項更改按鈕單擊function？

Question

我有一個提交按鈕，它根據用戶選擇的<option>調用特定方法。 問題是當我按下提交按鈕時，前一個和當前的 addEventListener 及其相應的方法都會被調用。 function 一和二都被執行。 如果下拉值為 2 並且用戶按下提交按鈕，我只想執行 functiontwo。 我究竟做錯了什么？

HTML：

<select class="div-toggle" id="filter-list" data-target=".my-info-1">
    <option value="1" data-show=".1">Option 1</option>
    <option value="2" data-show=".2">Option 2</option>
</select>

<button  id="submitbutton">Submit</button>

jQuery/JavaScript：

我在這里使用 if 路徑名，因為我使用了一個通用的 JavaScript 文件。 如果我在函數之外聲明事件監聽器，我會在其他頁面上收到未定義的錯誤，因為它找不到元素。

var btnsubmit = document.getElementById("submitbutton");


if (window.location.pathname=='/test/testpage.html') {
    $('#filter-list').on('change', function() {
        if(this.value == '1'){
            btnsubmit.addEventListener('click', functionOne);
        } else if(this.value == '2'){
            btnsubmit.addEventListener('click', functionTwo);
        }
    });

Answer 1

而不是您的方法，您可以選擇 function 按鈕單擊基礎上的 select 值，例如：

 document.querySelector('#submitbutton').addEventListener('click', () => { var valueSelect = document.querySelector('#filter-list').value; if (valueSelect === '1') { functionOne(); } else { functionTwo(); } }); function functionOne(){ console.log('one'); } function functionTwo(){ console.log('two'); }

 <select class="div-toggle" id="filter-list" data-target=".my-info-1"> <option value="1" data-show=".1">Option 1</option> <option value="2" data-show=".2">Option 2</option> </select> <button id="submitbutton">Submit</button>

Answer 2

您需要取消訂閱之前設置的EventListener 。

像這樣的東西：

        if (this.value == '1') {
            btnsubmit.addEventListener('click', functionOne);
            btnsubmit.removeEventListener('click', functionTwo);
        } else if (this.value == '2') {
            btnsubmit.addEventListener('click', functionTwo);
            btnsubmit.removeEventListener('click', functionOne);
        }

Answer 3

你可以試試這樣的

$('#submitbutton').on('click', function() {
    if (window.location.pathname=='/test/testpage.html') {
       if($('#filter-list').val() == '1'){
          functionOne();
       } else if($("#filter-list").val() == '2'){
          functionTwo();
       }
     }
});