Javascript jQuery：循环使用20个不同的ID；选择"；更改时执行函数的下拉列表

我目前有20个不同的选择和选项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个下拉列表，所以我必须创建我的change event函数20次，它才能工作，在每个函数中声明每个select ID，复制许多相同的代码

---

想知道如何通过所有20个select ID为所有循环创建一个函数，您可以轻松地将其转换为循环。但是，如果我们假设只有这些元素的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更简洁/更容易。）

使用一个公共类而不是ID来选择元素谢谢！这是非常有用的，我需要了解更多关于jquery的信息。看起来，我没有意识到有这样的函数。没问题！需要明确的是，这并不依赖于jQuery中的任何特殊“函数”——只是如果您有一个表示多个元素的jQuery对象，您可以一次将事件侦听器附加到所有元素，并且在处理程序中，

这个

引用事件目标中的任何元素。