1

選択した jqueryでスタイル設定されたドロップダウンがあり、見た目も機能も良好です。

このドロップダウンには、Defender と Protector の 2 つのオプションがあります。

ユーザーが 1 つのオプションを選択すると、2 番目のドロップダウンが表示され (これは奇妙なことにスタイルが選択されていません)、防御者または保護者が ID を持っているかどうかを尋ねます。

ここに画像の説明を入力

生成されたドロップダウンに選択したスタイルを適用する方法がわかりません。jquery 関数に chzn クラスを追加しようとしましたが、成功しません。

選択したスタイルで生成されたドロップダウンをスタイルする方法は?

これはスクリプトです：

$(function () {
    $('#select_guy').change(function () {
        $('#already_exists').show();
        $('.people_class').hide();
        if ($('#select_guy').val() == 'Defender') {
            $("#already_exists").html('');
            $("<option/>").val('0').text('Select option').appendTo("#already_exists");
            $("<option/>").val('Defender-hasID').text('Defender has ID').appendTo("#already_exists");
            $("<option/>").val('Defender-noID').text('Defender has NO ID').appendTo("#already_exists");
        }
        if ($('#select_guy').val() == 'Protector') {
            $("#already_exists").html('');
            $("<option/>").val('0').text('Select otcion').appendTo("#already_exists");
            $("<option/>").val('protector-hasID').text('Protector has ID').appendTo("#already_exists");
            $("<option/>").val('protector-noID').text('Protector has NO ID').appendTo("#already_exists");
        }
    });
    $('#already_exists').change(function () {
        $('.people_class input').val('');
        $("#id_cedente").val('').trigger("liszt:updated");
        $("#id_protector").val('').trigger("liszt:updated");
        $('.people_class').hide();
        $('#' + $(this).val()).show();
        /*if (  $('#already_exists').val() == 'Defender-noID'  )
            $(".chzn-select").val('').trigger("liszt:updated");*/
    });
});
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({
    allow_single_deselect: true
});
$(".chzn-select").chosen({
    no_results_text: "No results"
});

jsfiddleを見てください

- -アップデート

@Serhiy $('#already_exists').chosen(); は、関数の最後に次のように追加することでほぼ解決しました

ここに表示

ただし、ユーザーがオプションを選択した場合に発生する新しい問題は問題ありませんが、ユーザーが突然気が変わって最初のレベル{Defender、Protector}で他のオプションを選択することにした場合、jquery は新しいドロップダウンを作成するため、3 つになりました! お気に入り：

ここに画像の説明を入力

4

1 に答える 1

1

I think you just need to execute the render method in the main change function.

$(".chzn-select").chosen();

As the drop-down is being added dynamically and is not being originally rendered.

Also have you looked into select 2 if this is a new project, it may be more developed at this point, esp since you're working with jquery. http://ivaynberg.github.io/select2/

于 2013-07-15T00:07:41.097 に答える