jquery - chzn-select 不需要的下拉列表创建了 jquery

Question

我有一个样式为 with chosen 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();在函数结束时作为

shown here

然而又产生了一个新问题如果用户选择一个选项是可以的，但是如果用户突然改变主意并决定在第一级选择其他选项 {Defender, Protector} jquery 会创建一个新的下拉列表，所以现在有 3 个!喜欢:

Answer 1

我觉得你只需要在主变化函数中执行render方法即可。

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

因为下拉菜单是动态添加的，并不是最初呈现的。

如果这是一个新元素，您是否也查看过 select 2，此时它可能更发达，尤其是因为您正在使用 jquery。 http://ivaynberg.github.io/select2/