jQuery：循环遍历 "Select" 下拉菜单的 20 个不同 ID，以在更改时执行功能

Question

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

下面的示例不是实际示例，所以我这样做的原因并不重要（即我需要获取选项中的值和文本以传递给我的select离子变化时的最终函数）以及，我如何在不重复相同函数 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 select 下拉菜单，为了举例：

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 select 或下拉...

我在同一个页面上有 20 个下拉菜单，所以我必须创建我的更改事件函数 20 次才能工作，在每个函数中声明每个 select ID，重复很多相同的代码。

想知道如何为所有 20 个 select 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 所说，这将是 cleaner/easier 使用 class 而不是一堆单独的 ID。）

jQuery：循环遍历 "Select" 下拉菜单的 20 个不同 ID，以在更改时执行功能

jQuery: Loop through 20 different IDs for "Select" Dropdowns to Execute Function on Change

javascript

jquery

loops

html-select