Question

我想更改下拉字段。对于普通的，这很容易，但是Foundation用自定义下拉字段替换它。

这里的HTML代码：

<div class="row">
   <div class="small-centered columns">
  <select name="language" id='customDropdown' class='large languageDropdown'>
         <option value="de">German</option>
         <option value="en">English</option>
         <option value="ca">Castelliano</option>
         <option value="es">Spanisch</option>
         <option value="fr">Französisch</option>
         <option value="pt">Portugisisch</option>
      </select>
   </div>
</div>

这就是基金会的成就：

<div class="row">
<div class="small-centered columns">
    <select name="language" id="customDropdown" class="large languageDropdown hidden-field" data-id="1375994037026-oNYTe">
                <option value="de">German</option>
                <option value="en">English</option>
                <option value="ca">Castelliano</option>
                <option value="es">Spanisch</option>
                <option value="fr">Französisch</option>
                <option value="pt">Portugisisch</option>
           </select>
           <div class="custom dropdown large languageDropdown" data-id="1375994037026-oNYTe">
              <a href="#" class="current">German</a>
              <a href="#" class="selector"></a>
              <ul>
                  <li class="selected">German</li>
                  <li class="">English</li>
                  <li class="">Castelliano</li>
                  <li class="">Spanisch</li>
                  <li class="">Französisch</li>
                  <li class="">Portugisisch</li>
              </ul>
           </div>
  </div>
 </div>

我的Javascript attemts：

1。 $（ '＃customDropdown'）VAL（jd.language）;

工作正常 - 但只有隐藏字段 - 如果我发送表单，则将正确的语言发送到服务器。但可见的DropDown字段仍显示旧值。

2。 $（ '＃customDropdown'）VAL（jd.language）.trigger（ '变更'）;

不幸的是，这不起作用 - 即使它像here上的魅力一样 - 无法找出为什么它不适用于我的代码。

3。 $（ '＃customDropdown'）VAL（jd.language）.change（）。 Foundation.libs.forms.refresh_custom_select（'。languageDropdown'，true）;

这会引发Javascript错误：

Uncaught TypeError：Object .languageDropdown没有方法'next'

4。 $（ '＃customDropdown'）VAL（jd.language）。（文档）$ .foundation（）;

以为它会刷新基础的javascript，但事实并非如此。 ......

用尽了想法（也许我会监督......？ - 这就是我希望你们能帮我找到的）但有一件有趣的事情是：如果我提交表单，我会被重定向到提交页面。如果我使用浏览器按钮返回：.... VOILA！ - 显示正确的下拉字段。但那不是我想要的：P

Answer 1

自从该示例解决方案最初发布以来，Zurb已经做了一些更改（基础2.2）。使用Foundation 4，您可以使用以下函数调用请求更新“自定义”样式选择框：

Foundation.libs.forms.refresh_custom_select($('.languageDropdown'), true);

将$（'。languageDropdown'）替换为您要刷新的原始选择框的选择器。此外，在调用此函数之前，请确保已更新原始（隐藏）选择框。因此，在您的情况下，您将调用以下内容以更新隐藏的选择框，然后触发基金会的刷新。

$('.languageDropdown').val('en');
Foundation.libs.forms.refresh_custom_select($('.languageDropdown'), true);

使用Zurb Foundation以编程方式更改自定义表单下拉列表

1 个答案: