Question

我在使用双列表下拉选择器时遇到了一些问题。我之前尝试用select-options安排它，但是当我试图动态隐藏选项时遇到了重大问题。

使用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>

我想要的是：

两个列表的行为类似于两个下拉列表（select-option）。我为单个列表尝试了一些解决方案，但是当在同一页面上使用两个列表时，我无法使其正常工作..（例如：http://jsfiddle.net/a6NJk/202/）
仅针对第二个列表中的选项，并根据第一个列表选项

例如：

如果在第一个列表中没有选择，则不显示车型第二个清单
如果在第一个列表中选择'Volvo'，则只有第二个列表中显示Volvo类车型

如果方便的话，我会非常感谢jsfiddle解决方案。

事先谢谢

Answer 1

我认为这很有效：http://jsfiddle.net/a6NJk/221/ 我不会说代码是尽可能优化的，但它适用于所有最新的浏览器（Safari，Opera，Chrome，Firefox，Internet Explorer 10,9和8,7 [在怪癖模式]）。它的作用是：

在选择第一个选项时显示第二个ul
在第一个值中更改值时，在第二个ul中重新显示[SELECT]
当第一个ul的ul等于第二个ul中li的类时，仅显示第二个li data-value中的值。

我还将整个函数代码放在一个后来调用的变量中。

基本上，您只需要将2个处理程序（thisDropDown，nextDropDown）更改为页面上的ul id。

我希望这对你有所帮助！

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

1 个答案: