селектор JQuery для выбора OptionGroup с определенным значением этикетки

Question

У меня есть выбрать несколько с опцией групп:

<select _ngcontent-oeq-14="" class="form-control" id="category-select" multiple=""> 
    <optgroup label="grocery products"> 
     <option>meat</option> 
     <option>dairy</option> 
     <option>confectionary</option> 
     <option>dessert</option> 
     <option>baking</option> 
     <option>condiments</option> 
     <option>beverages</option> 
     <option>Dr IQ</option> 
     <option>Magma</option> 
     <option>Tornado</option> 
    </optgroup> 
    <optgroup label="meals"> 
     <option>African</option> 
     <option>American</option> 
     <option>Argentine</option> 
     <option>Asian</option> 
     <option>Asian Fusion</option> 
     <option>BBQ</option> 
     <option>Bakery</option> 
     <option>Beverages</option> 
     <option>Brazilian</option> 
     <option>Breakfast</option> 
     <option>British</option> 
     <option>Cafe</option> 
     <option>Cambodian</option> 
     <option>Chinese</option> 
     <option>Coffee and Tea</option> 
     <option>Contemporary</option> 
     <option>Continental</option> 
     <option>Deli</option> 
     <option>Desserts</option> 
     <option>Drinks Only</option> 
     <option>European</option> 
     <option>Fijian</option> 
     <option>Filipino</option> 
     <option>Finger Food</option> 
     <option>Fish and Chips</option> 
     <option>French Fusion</option> 
     <option>German</option> 
     <option>Greek</option> 
     <option>Grill</option> 
     <option>Healthy Food</option> 
     <option>Ice Cream</option> 
     <option>Indian</option> 
     <option>Indonesian</option> 
     <option>International</option> 
     <option>Irish</option> 
     <option>Italian</option> 
     <option>Japanese</option> 
     <option>Jewish</option> 
     <option>Juices</option> 
     <option>Kiwi</option> 
     <option>Korean</option> 
     <option>Latin</option> 
     <option>American</option> 
     <option>Lebanese</option> 
     <option>Malaysian</option> 
     <option>Mediterranean</option> 
     <option>Mexican</option> 
     <option>Middle Eastern</option> 
     <option>Mongolian</option> 
     <option>Moroccan</option> 
     <option>Nepalese</option> 
     <option>North Indian</option> 
     <option>Pacific</option> 
     <option>Persian</option> 
     <option>Pizza</option> 
     <option>Portuguese</option> 
     <option>Pub Food</option> 
     <option>Seafood</option> 
     <option>Singaporean</option> 
     <option>South Indian</option> 
     <option>Spanish</option> 
     <option>Sri Lankan</option> 
     <option>Steakhouse</option> 
     <option>Street Food</option> 
     <option>Sushi</option> 
     <option>Taiwanese</option> 
     <option>Thai</option> 
     <option>Turkish</option> 
     <option>Vietnamese</option> 
    </optgroup> 
</select> 

мне нужно, чтобы отобразить элемент управления формы, только если конкретная группа опций (еда) имеет один или несколько выбранные опции.

У меня уже есть эта рабочая функция, которая выполняется каждый раз, когда MULTISELECT изменения:

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

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

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

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

Я пытаюсь изменить его, чтобы сделать проверку, чтобы увидеть, если какой-либо «питание» выбраны. Я использую 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(
      <any>($(this).text(), $(this).val()) 
     ) 
    }); 

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

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

Но моя линия здесь не совсем верно, потому что, если никогда не приравнивает к истине:

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

Что я делаю неправильно?

Answer 1

Используйте это условие, чтобы проверить, если родительский OPTGROUP является упомянутый один:

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

вместо

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