Javascript 如何从自定义下拉菜单中选择县、市和地区

如何在第一个菜单中选择台北，而在第二个菜单中仅显示台北地区。如何链接菜单？ 没有v-model来监控自定义菜单，所以我不知道如何判断。 “方法”部分是单击时将带到选择中的值。 谢谢你的帮助

<div class="form-control invoice-select">
    <div class="login-placeholder" @click="isAddShow=!isAddShow">{{ addPlaceholder }}
        <span class="arrow-icon" :class="{active:!isAddShow}"></span>
    </div>
    <ul v-show="isAddShow" class="l-select-wrap">
        <li v-for="(item,i) in addSelectData" :key="i" @click="addSelectOption(item)"
            class="l-select-item">
            <span>{{item.name}}</span>
        </li>
    </ul>
</div>
<!-- select area -->
<div class="form-control invoice-select">
    <div class="login-placeholder" @click="isAreaShow=!isAreaShow">{{ areaPlaceholder }}
        <span class="arrow-icon" :class="{active:!isAreaShow}"></span>
    </div>
    <ul v-show="isAreaShow" class="l-select-wrap">
        <li v-for="(item,i) in addSelectData" :key="i" @click="areaSelectOption(item)"
            class="l-select-item">
            <span>{{item.areas}}</span>
        </li>
    </ul>
</div>


data:{
    addSelectData: [{
        name:"Taipei",
        areas: "A",
        areas: "B",
        areas: "C",
        areas: "D",
        areas: "E",
        areas: "F",
    },
    {
        name:"Taichung",
        areas: "A1",
        areas: "B1",
        areas: "C1",
        areas: "D1",
        areas: "E1",
        areas: "F1",
    },
    ],
    addPlaceholder: "Select county",
    areaPlaceholder: "Select area",
    isAddShow: false,
    isAreaShow: false,
}
methods:{
    //Click to replace the value
    addSelectOption(item) {
        this.addPlaceholder = item.name
        this.isAddShow = false
    },
    
    areaSelectOption(item) {
        this.areaPlaceholder = item.areas
        this.isAreaShow = false
    },
}

---

有很多方法可以做到这一点。我建议您使用vuejs提供的计算属性

首先更改具有相同属性的对象的重复关键帧。您当前的对象将被JS读取为

addSelectData: [{
        name:"Taipei",
        areas: "F", // Object keys must be unique. this makes other area disappear
    },
    {
        name:"Taichung",
        areas: "F1",
    },
    ],

要避免只读取最新的键，请将其更改为数组，如下格式所示

addSelectData: [{
        name:"Taipei",
        areas: ["A","B","C","D","E","F"]
    }
],

现在，对于isAreaShow div，我们将创建一个新的computed selectedAreas属性

    <ul v-show="isAreaShow" class="l-select-wrap">
        <li v-for="(item) in selectedAreas" :key="i" @click="areaSelectOption(item)"
            class="l-select-item">
            <span>{{item}}</span>
        </li>
    </ul>

---

谢谢你的回答，但我只想得到面积的最后一个值？@ChiehYUWU哪一个？是否与重复密钥有关？请阅读更新的答案

methods: { //your methods here },
computed: {
    selectedAreas: function() {
        if(this.isAreaShow){
            // Get the array where selected area lies
            let selectedItem = this.addSelectData.filter(item => item.name == this.addPlaceholder);
            // setting area to be object
            selectedItem = selectedItem.length ? selectedItem[0] : { areas: [] };
            // get values of object and remove selected area from it
            return selectedItem. areas;
        }
        return ["Select Area"];
    }
}