javascript - jQuery:循环遍历 "Select"下拉列表的 20 个不同 ID 以在更改时执行函数

Question

我目前有 20 个不同的 SELECT 和 OPTION HTML 下拉菜单，当发生“更改”时，我需要在所有下拉菜单上执行相同的功能。我知道这样做的错误方法是重复该函数 20 次，必须有一种方法可以循环 ID 选择器并在发生更改时执行。

下面的示例不是实时示例，因此我这样做的原因并不重要(即，我需要获取选项中的值和文本以传递到我的最终函数选择更改时)，以及如何在不重复相同功能 20 次的情况下循环遍历 ID。

就本示例而言，valLit 和 langLit 是每个下拉列表都可以更改的变量，但一次只能更改一个，并传递到另一个函数。

jQuery 到循环:

$('#mySelect0').change(function(event) {
valLit = $('#mySelect0').val();
langLit = $('#mySelect0 option:selected').text();

//Function to Execute on Change Event Goes Here (Same Function for All)

});

$('#mySelect1').change(function(event) {
valLit = $('#mySelect1').val();
langLit = $('#mySelect1 option:selected').text();

//Function to Execute on Change Event Goes Here (Same Function for All)

});

$('#mySelect2').change(function(event) {
valLit = $('#mySelect2').val();
langLit = $('#mySelect2 option:selected').text();

//Function to Execute on Change Event Goes Here (Same Function for All)

});

以此类推20次...

以下是用于示例的 HTML 选择下拉列表:

HTML 示例:

<select id="mySelect0">
<option value="">Choose Social Network</option>
<option value="https://www.facebook.com">Facebook</option>
<option value="https://www.twitter.com">Twitter</option>
<option value="https://www.instagram.com">Instagram</option>
</select>

<select id="mySelect1">
<option value="">Choose News Source</option>
<option value="https://www.cnn.com">CNN</option>
<option value="https://www.foxnews.com">Fox News</option>
<option value="https://www.abcnews.com">ABC News</option>
</select>

<select id="mySelect2">
<option value="">Choose Shopping Source</option>
<option value="https://www.amazon.com">Amazon</option>
<option value="https://www.walmart.com">Walmart</option>
<option value="https://www.bestbuy.com">Best Buy</option>
</select>

等等 20 个选择器下拉菜单...

我在同一页面上有 20 个下拉菜单，因此我必须创建更改事件函数 20 次才能使其正常工作，在每个函数中声明每个选择 ID，从而复制大量相同的代码。

想知道如何为所有 20 个选择 ID 的循环创建一个函数

Answer 1

您可以轻松地将其转换为循环。但是，如果我们假设只有这些元素的 id 以 mySelect 开头，那么您甚至不需要循环来使用 jQuery 来完成此操作。

$('select[id^="mySelect"]').change(function(event) {
    valLit = $(this).val();
    langLit = $(this).find('option:selected').text();

    //Function to Execute on Change Event Goes Here (Same Function for All)

});

(编辑:正如 @ArunPJohny 所说，使用类而不是一堆单独的 ID 会更干净/更容易。)