如果您使用的是Foundation 3：

Question

我很难在Zurb的基础上改变选择框的价值。我正在使用隐藏实际选择框的自定义表单，并使用无序列表作为选择框。我的问题是，更改选择框值的常用方法不起作用：

$('#selectboxID').val('something')

上面的代码假设选择框中每个选项的值与文本相同：

<option value="1">1</option>

我也尝试过：

$($('.dropdown ul li')[1]).addClass('current') 

$($('.dropdown ul li')[0]).removeClass('current') //remove current class from the other one

但它也不起作用。

Answer 1

当您自己绑定更改事件时，还有其他用例，您可能不想触发它。代码只强制刷新select：

Foundation.libs.forms.refresh_custom_select(@jQueryElement, true)

其中@jQueryElement是原始的隐藏选择。

Answer 2

更改所选索引后，您必须触发“更改”事件。

示例：

// Change selected option
$('#selectboxID').val('something');
// Or use selectedIndex: $("#selectboxID")[0].selectedIndex = 0;

// Fire change event
$('#selectboxID').trigger('change');

希望这有帮助

Answer 3

对基金会代码中最近处理更改事件的方式进行了一些修改。

你仍然可以使用trigger（）方法实现你想要的效果，但是你必须添加一个强制刷新＆＃39;标志：

$('#selectboxID').trigger('change', true);

Answer 4

如果您使用的是Foundation 3：

更新至最新的Foundation 3版本。

设置selectedIndex，使用JQuery的val()或触发change事件的任何内容都是开箱即用的。

如果您使用的是Foundation 4：

这似乎是一种回归。作为 - 希望是临时的 - 解决方法，您可以强制使用refresh_custom_selection方法更新自定义选择，例如：

Foundation.libs.forms.refresh_custom_selection($('select'))

注意：它是refresh_custom_selection，而不是refresh_custom_select！

没有必要使用后者（或trigger('change', true)）因为它们完全重建自定义选择，即它们重新复制您的选择选项，这涉及大量的DOM操作和它可以减慢很多事情。（取决于您选择的选项和其他代码的大小）

另一方面，refresh_custom_selection只更新显示的值，这是一个更轻量级的操作。

PS：您也可以使用

代替refresh_custom_selection

$('a.current', $select.next()).text($('option:selected', $select).text());

但是该代码对生成的HTML进行了假设，因此最好坚持使用提供实用程序方法

通过JavaScript改变Zurb基金会选择框的价值

4 个答案:

如果您使用的是Foundation 3：

如果您使用的是Foundation 4：