Jquery 在菜单中转换2个级联选择（在桌面模式下），并在移动模式下显示常规选择

今天，我发现了一个有趣的解决方案，可以将经典的选择转换为按钮列表，我想知道是否可以将其转换为常规菜单

如果可以，此菜单在桌面模式下必须显示为这样，如果在平板电脑/手机模式下，则显示常规选择。这部分可以通过使用 一些代码，如if$window.width>768{show the converted select}else{show regular select}

结构是：

<div class="category-container">
  <p>Chose category</p>
  <select id="select_1" name="text">
    <option>Category 1</option>
    <option>Category 2</option>
    <option>Category 3</option>
    <option>Category 4</option>
    <option>Category 5</option>
    <option>Category 6</option>
    <option>Category 7</option>
    <option>Category 8</option>
    <option>Category 9</option>
    <option>Category 10</option>
    <option>Category 11</option>
    <option>Category 12</option>
  </select>
</div>

当您从第一个选择中选择一个选项时，将显示第二个选择，并显示所选类别的子类别

<div class="subcategory-container">
  <p>Chose subcategory</p>
  <select id="select_2" name="text">
    <option>Subcategory 1</option>
    <option>Subcategory 2</option>
    <option>Subcategory 3</option>
    <option>Subcategory 4</option>
    <option>Subcategory 5</option>
    <option>Subcategory 6</option>
    <option>Subcategory 7</option>
    <option>Subcategory 8</option>
    <option>Subcategory 9</option>
    <option>Subcategory 10</option>
    <option>Subcategory 11</option>
    <option>Subcategory 12</option>
  </select>
</div>

下面是一个示例，您可以检查到目前为止的功能

---

如果可能的话，这在IE8中也必须起作用。谢谢

所有的功劳都归于维贾亚克里希南·克里希南

如果$window.width>768{ 变量selectName=$'select'.attr'name'； //添加与所选元素同名的隐藏元素 $'select'。每个函数{ var hidden=$； 隐藏.val$this.val； 隐藏。在$this之后插入； }; $select[name=category]option.unwrap.eachfunction{ var btn=$+$this.text+； //如果$this.is'：选中'btn.addClass'on'； $this.replaceWithbtn； }; $“选择[名称=子类别]”。每个函数{ var categoryID=$this.data'category-id'； $this.find'option'。unwrap.eachfunction{ var btn=$+$this.text+； //如果$this.is'：选中'btn.addClass'on'； $this.replaceWithbtn； }; }; //类别单击处理程序 $document.on'click'，'.category、.subcategory'，函数{ $this.sibbins.removeClass'on'； $this.addClass'on'； $'input[name='+selectName+']'.val$this.text； //检查单击的元素是否为类别，如果是，则显示相应的子类别 如果$this.is'.category'{ //先把东西藏起来 $'div.subcategory-container'.addClass'hidden'； $'.subcategory'.hide； //检查是否有任何子类别，如果有，请显示它们 如果$'.subcategory[数据所属='+$this.data'category-id'+']'.length{ $'div.subcategory-container'。删除类'hidden'； $'.subcategory[数据属于='+$this.data'category-id'+']'。显示； } } }; }否则{ $select[name=category].changefunction{ $'div.subcategory-container'.addClass'hidden'； $'select[name=subcategory]'。隐藏； var cat=$this.find'option:checked'。数据'category-id'； 如果$'select[name=subcategory][data category id='+cat+']'.length{ $'div.subcategory-container'。删除类'hidden'； $'select[name=subcategory][data category id='+cat+']'。显示； } }; }; 货柜组， div.subcategory-container{ 宽度：250px； 显示：内联块； 填充：0 10px； } 分区类别， 子类别{ 显示：块； 边框：2个实心ccc； 右边距：5px； 填充物：2px 5px； 光标：指针； 浮动：左； 宽度：100%； } 第二组， div.subcategory.on{ 背景色：777； 颜色：白色； } p{ 宽度：100% } div.subcategory-container.hidden{ 显示：无； } 选择类别

第一类 第2类 第3类 第4类 第5类 第6类 类别7 第8类 第9类 第10类 类别11 第12类 选择子类别

子类别1 子类别2 子类别3 子类别4 子类别5 子类别6 子类别7 子类别8 子类别9 子类别10 子类别11 子类别12 当我们选择一个像Category 4这样的选项时，在另一个像Selected subcategory这样的选择菜单中显示它的子类别。注意：目前只有类别4有任何子类别