使用 jQuery 选择选项循环的问题

Posted 2023-05-09

【中文标题】使用 jQuery 选择选项循环的问题

【英文标题】：Issues with Select Option loop with jQuery

【发布时间】：2020-10-07 20:43:15

【问题描述】：

我正在使用 jQuery 循环遍历许多 Select Option html 元素，我可以让它一次运行一个，但如果数据存储在 jQuery 元素中，我将难以访问数据。

例如我有这 2 个 Select html 元素

var lList = $(".p1_lSelect");

var rList = $(".p1_rSelect");

我可以通过以下方式获得我想要的输出

$(".p1_lSelect option:selected").each(function() 
    selected = $(this).text(); //selected == "p1_lSelect_Data"
    console.log(selected);
);

$(".p1_rSelect option:selected").each(function() 
    selected = $(this).text(); //selected == "p1_rSelect_Data"
    console.log(selected);
);

//Console logs .p1_lSelect_Data and .p1_rSelect_Data as expected

我想要的是类似于以下内容的内容，以便我可以更改要输入循环的列表

function foo()
    var lList = $(".p1_lSelect");
    var rList = $(".p1_rSelect");
    bar(lList);
    bar(rList);


function bar(list)
    $("list option:selected").each(function() 
        selected = $(this).text();
        console.log(selected);
    );
    //Console log does not print

我该怎么做呢？

【参考方案1】：

请根据您的结构尝试以下代码：

function foo()
    var lList = $(".p1_lSelect");
    var rList = $(".p1_rSelect");
    bar(lList);
    bar(rList);


function bar(list)
    $(list).find("option:selected").each(function() 
        selected = $(this).text();
        console.log(selected);
    );
    //Console log does not print

【讨论】：

我也会试试这个，好像在这里实现起来会更容易。使用@Majed Badawi 建议的模板文字而不是 find 方法会有什么直接的好处吗？

您可以使用 children() 方法代替 find() 方法。

在这个例子中，列表参数是对象，所以我认为如果你想传递对象参数，你不能使用模板文字。

如果你想使用模板文字，你必须像@Majed一样将类名作为函数栏的参数传递。

好吧，在这种特殊情况下，听起来麻烦多于其价值，因为 find 方法工作得很好。我对模板文字一无所知，所以我只需要同时阅读它们。感谢您的回答！

【参考方案2】：

您可以传递列表的名称并将其附加到选择器，如下所示：

function foo()
    bar("p1_lSelect");
    bar("p1_rSelect");


function bar(list)
    $(`.$list option:selected`).each(function() 
        selected = $(this).text();
        console.log(selected);
    );
    //Console log does not print

【讨论】：

我试一试，你能告诉我你在这里使用的花括号在 jQuery 中叫什么吗，我想更多地了解它是如何工作的

非常感谢

【参考方案3】：

使用find() 方法：

function bar(list) 
    list.find("option:selected").each(function() 
        console.log($(this).text());
    );
);