【问题标题】：chzn-select unwanted dropdown created jquerychzn-select 不需要的下拉菜单创建 jquery
【发布时间】：2013-07-14 23:57:09
【问题描述】：

我有一个样式为 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 个！喜欢：

【问题讨论】：

标签： jquery html css jquery-selectors

【解决方案1】：

我认为你只需要在主更改函数中执行渲染方法即可。

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

由于下拉菜单是动态添加的，并且最初并未呈现。

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

【讨论】：

不知道 select 2，谢谢，我会看看，但是我想先用 chzn 完成。您能否发布 jsfiddle，我应该在哪里添加 $(".chzn-select").chosen(); 以便将其应用于生成的下拉列表？
@cMinor 我指的是第一个更改函数 $('#select_guy').change(function () { 虽然是的，如果你想为我整理一个 js fiddle 来解决这个问题，我''''''''''''''''''''''''''''''''）
我添加了一行代码，但我猜我没有正确执行，你能帮我解决这个问题吗？这是一个小提琴jsfiddle.net/Kktp8/6
哦，哎呀，没有看到你已经在上面摆弄了，无论如何，在添加选项后，渲染调用应该在该函数的底部。此外，第二个选择没有必要的 css 类，但不好的部分是你做了那些它仍然对我不起作用。即使您最初渲染了控件并尝试使用 $("#already_exists").trigger("liszt:updated");事情还是失败了。如果这是一个选择的问题或者什么，我只是在基于 ID 的方法底部添加了渲染。 jsfiddle.net/Kktp8/10
是的，这就是我在第 19 个小提琴中所做的，我忘了点击更新。