对于多个select的更改事件，有些具有多个set

Question

我有几个选择，它们都共享同一个类

$(".my-select").on("change", function() {
console.log(this)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="my-select">
<option value="option1">1</option>
<option value="option2">2</option>
<option value="option3">3</option>
</select>
<select class="my-select" multiple="multiple">
<option value="option1">1</option>
<option value="option2">2</option>
<option value="option3">3</option>
</select>

然而，"on change">

什么是最有效的方式，在脑海中我可能有几个选择在我的页面上，一些显示多个其他不，以获得更改事件?纯JS或Jquery都可以。

Answer 1

请看下面的例子。

$(function() {
$(".my-select").change(function() {
console.log($(this).index(), $(this).val());
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="my-select">
<option value="option1">1</option>
<option value="option2">2</option>
<option value="option3">3</option>
</select>
<select class="my-select" multiple="multiple">
<option value="option4">4</option>
<option value="option5">5</option>
<option value="option6">6</option>
</select>
<select class="my-select">
<option value="option7">7</option>
<option value="option8">8</option>
<option value="option9">9</option>
</select>
<select class="my-select" multiple="multiple">
<option value="option10">10</option>
<option value="option11">11</option>
<option value="option12">12</option>
</select>

按预期工作。注意，multiple值是一个选定值的数组。