如何查看是否选中了下拉菜单或是否单击了搜索按钮

Question

我想在下拉菜单更改或搜索按钮被点击时触发ajax(而不是更改单词)。我怎么能一次检查呢，因为我不想单独检查。

例如，如果我必须检查下拉框和搜索输入的变化，我会使用以下脚本

jQuery(function($){

jQuery( ".js-category, .js-input" ).on( "change", function() {

});

});

但是我想检查下拉菜单是否被更改或者搜索按钮是否被按下，我想一次性检查。

Answer 1

最简单、最简洁的方法可能是使用命名函数。然后将函数注册为两个独立事件的回调函数。

function eventHandler(event) {
console.log("Hello World!");
}
jQuery("#dropdown").on("change", eventHandler);
jQuery("#button").on("click", eventHandler);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
<option>foo</option>
<option>bar</option>
</select>
<button id="button" type="button">button</button>

Answer 2

try this

<select id="select">
<option>select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button id="button" type="button">click me</button>
<script>
$('#button, #select').on('click change', function(e) {
if(e.type==='change' && this.id =='select' || e.type==='click' && this.id =='button') {
alert('select');
}
});
</script>

Answer 3

您可以将下拉框和按钮包装到表单中，并侦听提交(搜索按钮被单击)和更改(下拉框选择被更改)事件。不要忘记阻止默认提交行为，以避免不必要的重定向。

$("#js-form").on("change submit", (e) => {
e.preventDefault()
$("#test").html($("#test").html() + 0)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="js-form">
<select>
<option>1</option>
<option>2</option>
</select>
<input type="submit">
</form>
<div id="test">0</div>