chosen.js ::有没有人有实际工作的例子？

Question

有没有人使用和定制一些基本的selected.js代码？

我已经下载了js,css和png,从示例中复制了一些代码,编写了我自己的超简单示例,但我必须遗漏一些东西.我已经验证了code.jquery.js被包含并加载,与selected.css相同.

当我尝试调出一个非常简单的SELECT字段(下拉列表)时,我得到一个非常小的字段,并且单击该字段什么都不做.当我禁用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一旦基本示例运行正常,只将属性添加回元素.

请注意,元素上的multiple="multiple"属性select确实使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)

Answer 2

你必须瞄准选择

$('#items').chosen();

jsFiddle