使用Jquery控制两个下拉列表（预填充）

我在使用双列表下拉选择器时遇到一些问题。我以前曾尝试使用select选项进行排列，但在尝试动态隐藏选项时遇到了重大问题

使用ul li的另一个好处是，我可以使它的风格更加跨浏览器友好，也更容易（正如我从其他stackoverflow问题中了解到的）

我发现的其他解决方案都需要某种形式的加载，比如AJAX，来填充第二个列表，但这不是一个选项，因此整个列表都将预加载。可以添加/删除类和其他属性

<ul>
    <li>Volvo</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Ford</li>
    <li>Jeep</li>
</ul>

<ul>
    <li>[Choose Brand first]</li> <!-- visible if nothing chosen in 1st -->
    <li>[Choose model]</li> <!-- visible for all brands -->
    <li class="volvo">S80</li>
    <li class="volvo">V70</li>
    <li class="volvo">XC90</li>
    <li class="audi">A8</li>
    <li class="audi">A6</li>
    <li class="audi">A4</li>
    <li class="bmw">X1</li>
    <li class="bmw">M6</li>
    <li class="ford">fiesta</li>
    <li class="ford">Fiesta</li>
    <li class="ford">Mustang</li>
    <li class="ford">Explorer</li>
    <li class="jeep">Wrangler</li>
    <li class="jeep">Cherokee</li>  
</ul>

沃尔沃
奥迪
宝马
福特
吉普车


[首先选择品牌]
[选择型号]
S80
V70
XC90
A8
A6
A4
X1
M6
嘉年华
嘉年华
野马
Explorer
牧马人
切诺基

我想要的是：

使两个列表的行为类似于两个下拉列表（选择选项）。我为一个列表尝试了一些解决方案，但在同一页上使用两个列表时，我始终无法使其正常工作。。（例如：）

仅适用于第二个列表中的选项，该选项具有基于第一个列表选项显示的特定类

例如：

• 如果在第一个列表中没有选择，则在中不会显示任何车型 第二份名单
• 如果在第一个列表中选择“沃尔沃”，则第二个列表中仅显示沃尔沃级车型

如果方便的话，我非常乐意使用JSFIDLE解决方案

---

事先谢谢

我认为这很好地解决了问题： 我不会说代码已经优化到了最佳状态，但它可以在所有最新的浏览器上运行（Safari、Opera、Chrome、Firefox、InternetExplorer10、9和8,7[在怪癖模式下]）。 它所做的是：

• 选择第一个选项时，显示第二个

  ul

• 当第一个值更改时，在第二个

  ul

  中重新显示[选择]
• 当第一个ul的

  li数据值

  等于第二个ul中的li类时，仅显示第二个ul中的值

我还将整个函数代码放在一个变量中，然后调用该变量

基本上，您所要做的就是将页面上的2个处理程序（thisDropDown、nextDropDown）更改为ul id

---

我希望这对你有帮助

例如，您可以将类添加到ul列表中，并使用如下代码：

$（“.first ul>li”）.on（“单击”，function（）{var cl=$（this）.text（）.toLowerCase（）；$（.second ul”）.children（）.filter（function（i）{if（$（this）.hasClass（cl））return$（this）；}.css（{'color'：'red}）谢谢，但我似乎没有完全工作？你能看出我做错了什么吗？在小提琴中选择一个Jquery库并正确缩进函数，对我来说有效；-）啊!！呵呵，好的，谢谢：）很好的解决方案，非常感谢您的帮助！我只是对它做了一些简单的调整，以获得更多关于隐藏菜单的可用性（例如，在活动菜单外单击等），然后这正是我想要的