JS“点击”事件侦听器<select>需要点击两次吗？

Question

I have a simple filter set on a select tag with three options. When i change to a new option the list should filter. This works but i have to select one of the three options and then click the select box again for it to take effect? Is there an obvious reason for this?

HTML

            <select name = "todos" class = "filter-todo">
                <option value = "all">All</option>
                <option value = "completed">Completed</option>
                <option value = "uncompleted">Uncompleted</option>
            </select>
        </div>

JS

const filterTodo = (e) => {                                 //needs fixing(the options need two clicks)
    const todos = todoList.childNodes
    todos.forEach(function(todo){
        switch(e.target.value){
            case "all":
                todo.style.display = "flex"
                break;
            case "completed":
                if (todo.classList.contains('completed')){
                    todo.style.display = "flex"
                } else {
                    todo.style.display = "none"
                }
                break;
            case "uncompleted":
                if (!todo.classList.contains('completed')){
                    todo.style.display = "flex"
                } else 
                    todo.style.display = "none"
                break;
        }
    })
} 

const filterOption = document.querySelector('.filter-todo')
filterOption.addEventListener('click', filterTodo)

Answer 1

click is the wrong event to subscribe to. It will fire upon any click inside of the DOM tree, including on the option s themselves. To avoid this select has another event you should subscribe to instead. Just change one line and you're good to go:

filterOption.addEventListener('change', filterTodo)

This fires when the value changes, so when it's selected option is updated. More information can be found in plenty of places, so for good measure here is MDN on it .