12

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

しかし、それも機能しません。

4

4 に答える 4

15

自分で変更イベントをバインドしている場合は、別のユースケースもあります。トリガーしたくない場合があります。選択時に強制的に更新するコード：

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

ここで、@jQueryElementは元の非表示の選択です。

于 2013-05-15T12:31:20.770 に答える
8

選択したインデックスを変更した後、「変更」イベントをトリガーする必要があります。

例：

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

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

お役に立てれば

于 2012-10-10T02:41:07.870 に答える
6

最近、Foundationコードで変更イベントを処理する方法にいくつかの変更が加えられました。

trigger（）メソッドを使用して目的を達成することはできますが、「強制更新」フラグを追加する必要があります。

$('#selectboxID').trigger('change', true);
于 2013-07-22T05:50:40.603 に答える
2

Foundation 3を使用している場合：

最新のFoundation3リリースに更新されました。

設定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を前提としているため、provideユーティリティメソッドを使用することをお勧めします。

于 2013-10-20T12:57:33.617 に答える