Jquery / Javascript如何根据下拉菜单中的select选项更改按钮单击function？

Question

I have a submit button which calls a specific method based on the selected <option> by the user. The problem is both the previous and current addEventListener with their corresponding method gets called when I press the submit button. Both function one and two gets executed. I only want to execute functiontwo if the dropdown value is 2 and the user presses the submit button. What am I doing wrong?

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:

I use the if pathname here because I use one general JavaScript file. If I declare the eventlistener outside functions I get undefined error on other pages because it can't find the element.

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

Instead of your method you can choise which function on button click base to select value like:

 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

You need to unsubscribe from the previously set EventListener .

Something like this:

        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

You can try something like this

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