基础4自定义下拉菜单不绑定数据

Question

我已经在我使用的表格中实现了4个下拉级。

自定义下拉菜单没有绑定到我要单击的项目的相应值。

在4个标签的列表中，第一个项目将正确选择，但所有其他项目都将绑定到该项目之前...

Binds to option 1 - <li class="">Mr</li>
Binds to option 1 - <li class="">Mrs</li>
Binds to option 2 - <li class="">Miss</li>
Binds to option 3 <li class="">Ms</li>
1 - <option value="Mr">Mr</option>
2 - <option value="Mrs">Mrs</option>
3 - <option value="Miss">Miss</option>
4 - <option value="Ms">Ms</option>

奇怪的是，当您第二次单击或选择它绑定到正确的项目时。

我已经复制了几项具有相似结果的测试。

有人遇到类似的东西吗？

Answer 1

如果您真的使用zurb基础下拉元素，那么使用Zurb的语法来创建下拉菜单是明智的。通常，这是应用于下拉按钮的语法：

<a href="#" data-dropdown="drop" class="button dropdown">Dropdown Button</a><br>
<ul id="drop" data-dropdown-content class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

或用于基本下拉控制：

<a href="#" data-dropdown="drop1">Has Dropdown</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
<a href="#" data-dropdown="drop2">Has Content Dropdown</a>
<div id="drop2" data-dropdown-content class="f-dropdown content">
  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>

可以在Zurb的基金会网站上找到更多文档：http：//foundation.zurb.com/docs/components/components/dropdown_buttons.htmlhttp://foundation.zurb.com/docs/components/dropdown.html

如果我没有回答您的问题或可能误解了您的问题，或者您认为这是一个基础库中的错误，我也建议您升级到Foundation5（这是最近发布的最新版本，最近发布了）。P>

我希望这有所帮助。让我知道我是否误解或可以进一步帮助。

-mike