具有特定标签值

时间:2016-09-05 06:40:44

标签: jquery html select jquery-selectors selector

我有一个带选项组的选择倍数:

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

仅当特定选项组(餐)选择了一个或多个选项时,才需要显示表单控件。

我已经拥有了每次多选更改时都会执行的工作函数:

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);
}

但我在这里的界限不太对,因为if永远不等于true:

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

我做错了什么?

1 个答案:

答案 0 :(得分:1)

使用此条件检查父optgroup是否为上述提示:

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

而不是

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