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

时间:2013-07-14 23:57:10

标签: jquery html css jquery-selectors

我有一个下拉样式with chosen jquery,看起来效果很好。

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

当用户选择一个选项时,会出现第二个下拉列表(奇怪的是未选择样式)以及询问后卫或保护者是否有ID。

enter image description here

我不知道如何将所选样式应用于生成的下拉列表。 我尝试在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个! 像:

enter image description here

1 个答案:

答案 0 :(得分:1)

我认为你只需要在主变更函数中执行render方法。

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

由于动态添加下拉列表并且最初未呈现。

如果这是一个新项目,你也可以查看select 2,它可能在这一点上更加发达,尤其是因为你正在使用jquery。 http://ivaynberg.github.io/select2/