1

我有一个带有所选 jquery样式的下拉菜单，它看起来和工作都很好。

此下拉列表有两个选项：Defender 和 Protector。

当用户选择一个选项时，它会出现第二个下拉列表（奇怪的是没有选择样式）并询问防御者或保护者是否有 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 回答