Проблемы с Select Option l oop с jQuery

Question

Я использую от jQuery до l oop через многие элементы 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

То, что я хотел бы, было похоже на следующее, чтобы я мог изменить список, который я загружаю в l oop

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
}

Как мне go сделать это?

Answer 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
}

Answer 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
}

Answer 3

Используйте метод find():

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