Javascript 带有可折叠子项的html复选框选择列表

我正在使用Vue.js和HTML、SCSS创建一个网站，我需要创建一个类似于下面gif的下拉列表

上面的gif显示了选择酒店时下拉菜单的功能。下拉菜单应显示该酒店内可用的房间类型

我已经使用HTML和vue v-if创建了上面的示例。但是代码很庞大并且有bug，是否有提供类似下拉列表的包或示例。有人能推荐我吗

先谢谢你

我的代码

.下拉列表{ 浮动：左； 溢出：隐藏； } .下拉菜单{ 字体系列：开放式SAN； 字体大小：正常； 字体风格：普通； 字体拉伸：正常； 字母间距：正常； 颜色：灰色； 线高：1.5； 左边距：20px； 字体大小：16px； 宽度：229px； 高度：60px； 边框：实心1px e9e9e9； 边界半径：5px； 左侧填充：15px； 边缘顶部：7px； 左边距：20px； -webkit外观：无； -moz外观：无； 外观：无； /*背景：url../assets/First_Picker/icon-copy-2.svg不重复*/ 背景尺寸：12px； 背景位置：calc100%-20px中心； 背景色：白色； 背景重复：无重复； } .导航栏a:悬停， .dropdown:hover.dropbtn， .dropbtn:焦点{ 背景色：白色； 大纲：无； } .下拉内容{ 显示：无； 位置：相对位置； 背景色：f9f9f9； 盒影：0px 8px 16px 0px rgba0,0,0,0.2； z指数：1000； 线高：1.5； 左边距：20px； 字体大小：16px； 最小宽度：229px； 宽度：229px； 边界半径：0； 左侧填充：15px； 边缘顶部：7px； 左边距：20px； } .下拉内容a{ 浮动：无； 颜色：黑色； 填充：12px 16px； 文字装饰：无； 显示：块； 文本对齐：左对齐； } .下拉列表内容a：悬停{ 背景色：ddd； } 箭头1{ 左侧填充：50px； 宽度：5.4px； 高度：8.8px； /*变换：旋转-270度*/ 颜色：A9A9； } .下拉标题{ 颜色：A9A9； } .表演{ 显示：块； } /*复选框样式*/ .集装箱{ 显示：块； 位置：相对位置； 左侧填充：35px； 边缘底部：12px； 光标：指针； 字体大小：22px； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； /*宽度：102px*/ 高度：24px； 字体系列：开放式SAN； 字体大小：14px； 字体大小：正常； 字体风格：普通； 字体拉伸：正常； 线高：1.71； 字母间距：正常； 颜色：272729； } /*隐藏浏览器的默认复选框*/ .容器输入{ 位置：绝对位置； 不透明度：0； 光标：指针； 身高：0； 宽度：0； } /*创建自定义复选框*/ .对号{ 位置：绝对位置； 顶部：5px； 左：0； 高度：18px； 宽度：18px； 背景色：白色； 边框：1px纯灰； } /*在鼠标悬停时，添加灰色背景色*/ .container:悬停输入~。选中标记{ /*背景色：283fb0*/ } /*选中复选框后，添加蓝色背景*/ .container输入：选中~.checkmark{ 背景色：283fb0； } /*创建未选中时隐藏的复选标记/指示器*/ .勾选：之后{ 内容：； 位置：绝对位置； 显示：无； } /*选中时显示选中标记*/ .容器输入：选中~。选中标记：之后{ 显示：内联块； } /*设置复选标记/指示器的样式*/ .容器。选中标记：之后{ 左：6px； 顶部：2个； 宽度：6px； 高度：9px； 边框：纯白； 边框宽度：0 3px 3px 0； -webkit变换：旋转45度； -ms变换：旋转45度； 变换：旋转45度； } .结帐{ 宽度：114px； 边缘顶部：6px； 左边距：20px； 高度：60px； 边界半径：5px； 盒影：0 2px4p0 rgba0,0,0,0.1； 背景色：283fb0； } .checkout\u txt{ 宽度：76px； 高度：24px； 字体系列：开放式SAN； 字体大小：14px； 字体大小：粗体； 字体风格：普通； 字体拉伸：正常； 线高：1.71； 字母间距：正常； 文本对齐：居中； 颜色：ffffff； } {{hotel_selected？selected_hotel.name:'Select hotel'}

精选酒店

选择房间类型

{{item.hotel}} {{rmType.type}

---

查看此解决方案。我刚刚创建了一个小组件，可以帮助您稍微修改代码。我希望这有帮助

 <template>
  <div class="container">
    <form>
      <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <div class="form-group">
          <select v-model="selectedValue">
          <option  v-for="(val,key) in formData" :key="key">{{key}}</option>
        </select>
        </div>
        <div class="form-group">
          <app-checkbox :childData="selectedChildData"></app-checkbox>
        </div>
      </div>
    </div>
    {{selectedChildData}}
    </form>

  </div>
</template>

<script>
import AppCheckbox from "./AppCheckbox"
export default {
  data(){
    return {
      formData:{
        test1:["single","double"],
        test2:["sample1","sample2"]
      },
      selectedValue:"",
      selectedChildData:[],
      formDataSelected:[]
    }
  },
  watch:{
    selectedValue(val){
      this.selectedChildData = this.formData[val]
    }
  },
  components:{
    "app-checkbox": AppCheckbox
  }

}
</script>

<style>
</style>

这是AppCheckbox组件的代码

<template>
    <div>
        <div class="form-group" v-if="customData.length != 0 || customData.length != null" v-for="(val,index) in customData" :key="index">
            <input type="checkbox" :value="val" v-model="childSelectedData">{{val}}
        </div>
    </div>
</template>
<script>
export default {
    props:{
        childData:Array
    },
    data(){
        return {
            childSelectedData:[]
        }
    },
    computed:{
        customData:{
            get(){
                return this.childData;
            }
        }
    }
}
</script>

---

很好的问题，没有发送任何代码，即使你期望这个问题的答案。你能告诉我们你为此做了什么吗？因为SO不是一个免费的编码平台。你应该发送与下拉图像相关的代码。是的，有软件包和示例

---

s你试过谷歌吗？我想，最好用2下拉列表。第一选择是酒店。选择酒店后，房间类型选择将显示所选酒店的房间类型。