41

ドロップダウン メニューの組み合わせで Select2 を使用しています。「国」用のメニューと「都道府県」用のメニューがあります。選択した国によって、[都道府県] ドロップダウンの内容が変わります。都道府県は ajax を使用してデータベースから取得され、次のように表示されます。

$display_output = '<select style="width:350px;" tabindex="2" name="state" id="state" data-placeholder="Choose a Country..."> ';
$display_output .= '<option value="" selected>Select a State</option> ';

while ($state_details = $this->fetch_array($sql_select_states))
{
    $display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value == $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>';
}

$display_output .= '</select>';

ここまでは順調ですね。すべての州は正しく変更されますが、最初にロードすると、Select2 は州のドロップダウンに「未定義」と表示されます。

data-placeholder="Choose a Country..."

ロード時に選択された国が「米国」であり、州のリストが表示されますが、デフォルトまたは選択されていないためである可能性があると思います。「未定義」と表示されないようにデフォルト値を定義する他の方法はありますか?

もう 1 つの (しかしそれほど重要ではない) 問題は、たとえば、誰かが「米国」を選択してから「アリゾナ」を選択した場合、その人が国として「カナダ」に変更した場合、「アリゾナ」の州はそのままであるということです。ドロップダウンを開くと、カナダの州が選択可能です。誰かが別の国を選択したときに、州が再度選択されるまで、一時的にデフォルト値に戻す方法はありますか?

私の読み込みコードは現在、次のとおりです。

<script>
$(document).ready(function() { $("#state").select2(); });
</script>
4

9 に答える 9

64

3.* を選択

これは重複している可能性があるため、「コントロールを再構築せずに select2 データを更新する」を参照してください。もう 1 つの方法は、select2 要素を破棄してから再作成することです。

$("#dropdown").select2("destroy");

$("#dropdown").select2();

国の変更時に州/地域をリセットする際に問題がある場合は、現在の値をクリアしてみてください

$("#dropdown").select2("val", "");

ほぼ/すべての機能の概要を説明しているドキュメントhttp://ivaynberg.github.io/select2/をご覧ください。changeSelect2 は、後続のドロップダウンを更新するために使用できるイベントなどをサポートしています。

$("#dropdown").on("change", function(e) {});

4.* アップデートを選択

以下を使用して、コントロールを再構築せずにデータ/リストを更新できるようになりました。

fooBarDropdown.select2({
    data: fromAccountData
});
于 2013-07-23T18:44:51.257 に答える
19

他のコンポーネントがchangeイベントをリッスンしたり、カスタム イベント ハンドラーがアタッチされたりして、副作用が発生する可能性があるのはよくあることです。Select2 には、 change以外にトリガーできるカスタム イベント(select2:update など)がありません。*change.select2 イベントをトリガーすることで、jQuery のイベント名前空間に依存してスコープを Select2 に制限することができます。

$('#state').trigger('change.select2'); // Notify only Select2 of changes
于 2016-11-26T17:00:21.190 に答える