0

我在使用两个列表下拉选择器时遇到了一些问题。我以前尝试使用选择选项来安排它，但是当我尝试动态隐藏选项时遇到了重大问题。

使用 ul-li 的另一个好处是，我可以将其设置为对跨浏览器更友好，也更容易（正如我从其他 stackoverflow-questions 中理解的那样）。

我发现的其他解决方案都需要某种形式的加载（例如 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>

我想要的是：

  1. 对于两个列表的行为类似于两个下拉列表（选择选项）。我为单个列表尝试了一些解决方案，但是在同一页面上使用两个列表时，我永远无法使其正常工作..（例如：http: //jsfiddle.net/a6NJk/202/）
  2. 仅根据第一个列表选项显示第二个列表中具有特定类的选项

例如：

  • 如果第一个列表中没有选择，则第二个列表中不会显示任何车型
  • 如果在第一个列表中选择了“沃尔沃”，那么只有具有沃尔沃级别的车型才会显示在第二个列表中

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

预先感谢

4

1 回答 1

0

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

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

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

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

我希望这对你有帮助！

于 2013-05-07T01:04:51.173 回答