jquery - selected.js::有人有实际的工作示例吗？

Question

有人使用过并定制过一些基本的 selected.js 代码吗？

我已经下载了js、css和png，从示例中复制了一些代码，编写了我自己的 super 简单示例，但我一定缺少一些东西。我已经验证了 code.jquery.js 已包含并已加载，与 selected.css 相同。

当我尝试打开一个极其简单的选择字段(下拉菜单)时，我得到一个非常小的字段，并且单击该字段不会执行任何操作。当我禁用 selected.js 时，我只需获取显示所有选项的 SELECT 即可。

以下是我在 jQuery 中添加简单 SELECT 的方法(我必须动态填充该字段，尽管在本例中它都是硬编码的):

    $html = '<select name="items" id="items" multiple="multiple" size="1" class="chosenElement">';
    $html += '<option value="foo">foo</option>';
    $html += '<option value="bar">bar</option>';
    $html += '<option value="baz">baz</option>';
    $html += '<option value="qux">qux</option>';    
    $html += '</select>';

然后，当我显示包含选项的模式对话框时，我调用:

$('.modal-body').html($html);
$('.chosenElement').chosen();

到目前为止，我已经修改和测试了各种排列，在 Google 上搜索解决方案或示例，但似乎没有任何效果。这可能是一些非常愚蠢的事情，比如某个地方缺少分号，但我在这个“10 分钟实现”上浪费了很多时间，我需要寻求一些帮助。

https://github.com/harvesthq/chosen

Answer 1

如果您确实想测试“最基本”的示例，我建议:

1. 处理硬编码的 HTML(与动态添加的 HTML)
2. 从 select 元素中删除所有属性
3. 只有在基本示例运行正常后，才将属性添加回 select 元素。

请注意，select 元素上的 multiple="multiple" 属性确实会使 chosen.js 的行为有所不同。

我在这里运行了你的代码:http://jsfiddle.net/99Dkm/1/

而且效果很好。

我怀疑问题不在于 chosen.js 库，而在于你如何使用它(包装在一些基本的 jQuery onready 函数中缺失或其他)。

请注意，在 jsFiddle 的工作示例中，我仅包含 chosen.css 和 chosen.jquery.js。

注意:从 http://cdnjs.com/libraries/chosen 获取这些文件的 URL(javascript 和 css)