jquery selector for a select optiongroup with a specific label value

Question

I have a select multiple with option groups:

I need to display a form control only if a particular option group (meal) has one or more options selected.

I already have this working function that executes every time the multiselect changes:

changed() {
    this.selectedCategories = [];
    var self = this;

    $('#category-select option:selected').each(function () {
        self.selectedCategories.push(
            ($(this).text(), $(this).val())
        )
    });

    if (this.selectedCategories.length < this.numberOfCategories) {
        this.allSelected = false;
    }

    console.log(this.selectedCategories);
    this.onCategoriesChanged.emit(true);
}

I'm trying to modify it to do the check to see if any "meals" are selected. I'm using this SO answer:

changed() {
    this.selectedCategories = [];
    var self = this;

    $('#category-select option:selected').each(function () {
        if ($(this).parent()[0].label === "meals") {
            // at least one meal is selected, set the meal selected flag to true
        }
        self.selectedCategories.push(
            ($(this).text(), $(this).val())
        )
    });

    if (this.selectedCategories.length < this.numberOfCategories) {
        this.allSelected = false;
    }

    console.log(this.selectedCategories);
    this.onCategoriesChanged.emit(true);
}

But my line here isn't quite right because the if never equates to true:

$(this).parent()[0].label === "meals"

What am I doing wrong?

K K · Accepted Answer

Use this condition to check if the parent optgroup is the mentioned one:

$(this).parent('optgroup[label="meals"]').length

instead of

$(this).parent()[0].label === "meals"

jquery selector for a select optiongroup with a specific label value

Answers (1)

Related Questions