在vuejs中选择选项时如何获得optgroup标签？

Question

我想在选择选项时获取国家/地区组名称。我有几个国家，比如

<template>
    <select id="countries" v-model="country" @change="getCountryGroup($event)">
        <optgroup label="Asia">
            <option value="AF">Afghanistan</option>
            <option value="AM">Armenia</option>
            <option value="AZ">Azerbaijan</option>
            ...
            <option value="BD">Bangaldesh</option>
            ...
        </optgroup>
        <optgroup label="Australia / Oceania">
            <option value="AS">American Samoa</option>
            <option value="AU">Australia</option>
            <option value="CK">Cook Islands</option>
        </optgroup>
        <optgroup label="Africa">
            <option value="DZ">Algeria</option>
            <option value="AM">Angola</option>
            <option value="AZ">Azerbaijan</option>
        </optgroup>
        <optgroup label="South America">
            <option value="AR">Argentina</option>
            <option value="BO">Bolivia</option>
            <option value="BR">Brazil</option>
        </optgroup>
        <optgroup label="North America">
            <option value="US">United States</option>
            <option value="UM">United States Minor Outlying Islands</option>
            <option value="CA">Canada</option>
        </optgroup>
        <optgroup label="Europe">
            <option value="UK">United Kingdom</option>
            <option value="AL">Albania</option>
            <option value="AD">Andorra</option>
        </optgroup>
    </select>
</template>

假设当我选择Bangladesh时我想获取 optgroup name Asia。这是我的 vueJs 方法

getCountryGroup: function(event){
    console.log( event.target.getAttribute('label') );
}

Answer 1

这里有两个步骤

1. 获取选定的索引
2. 找到选定的选项
3. 选择所选选项的父元素 (optgroup)
4. 最后得到标签（国家组）

getCountryGroup: function(event){

    // 1. Get the selected index
    const index = event.target.selectedIndex;

    // 2. Find the selected option
    const option = event.target.options[index];

    // 3. Select the parent element (optgroup) for the selected option
    const optgroup = option.parentElement;

    // 4. Finally, get the label (Country group)
    const countryGroup = optgroup.getAttribute('label');

    console.log(countryGroup);
}

这是演示https://codepen.io/maab16/pen/KKKpJba