我想更改下拉字段。这对于普通的来说非常简单,但 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 尝试:
1. $('#customDropdown').val(jd.语言);
工作正常 - 但仅限于隐藏字段 - 如果我发送表单,正确的语言将发送到服务器。但可见的 DropDown 字段仍然显示旧值。
2. $('#customDropdown').val(jd.language).trigger('change');
不幸的是,这不起作用 - 即使它像魅力一样起作用 here - 无法找出为什么它不适用于我的代码。
3. $('#customDropdown').val(jd.language).change(); Foundation.libs.forms.refresh_custom_select('.languageDropdown', true);
这会引发 JavaScript 错误:
Uncaught TypeError: Object .languageDropdown has no method 'next'
4. $('#customDropdown').val(jd.语言); $(文档).foundation();
本以为它会刷新基础 javascript,但事实并非如此。 ...
没有想法了(也许我监督某事? - 这就是我希望你们能帮助我找到的) 不过,一件有趣的事情是:如果我提交表单,我会被重定向到提交页面。如果我使用浏览器按钮返回: .... 瞧! - 显示正确的下拉字段。但这并不是我想要的:P
最佳答案
自从最初发布该示例解决方案(Foundation 2.2)以来,Zurb 进行了一些更改。使用 Foundation 4,您可以使用以下函数调用请求更新“自定义”样式选择框:
Foundation.libs.forms.refresh_custom_select($('.languageDropdown'), true);
将 $('.languageDropdown') 替换为您想要刷新的原始选择框的选择器。另外,请确保在调用此函数之前已更新原始(隐藏)选择框。因此,在您的情况下,您将调用以下命令来更新隐藏的选择框,然后触发 Foundation 的刷新。
$('.languageDropdown').val('en');
Foundation.libs.forms.refresh_custom_select($('.languageDropdown'), true);
关于jquery - 使用 Zurb Foundation 以编程方式更改自定义表单下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18136125/