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 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个选择器...

我在同一页面上有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会更干净/更容易。）

jQuery：为“选择”下拉列表循环使用20个不同的ID，以在更改时执行功能

1 个答案: