selected.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();

到目前为止，我修改和测试了各种排列，在谷歌上搜索解决方案或示例，但似乎没有任何效果。这可能是非常愚蠢的事情，比如某个地方缺少分号，但我在这个“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）< /a>

Answer 2

你必须瞄准选择

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

jsFiddle

Answer 3

当您动态填充字段时，JSON 结果集是否会带“文本”和“值”属性返回？如果不是，Chosen 将无法在其列表中正确格式化结果。事实上，它根本不会添加它们。我经历了惨痛的教训才知道这一点，因为我的结果最初是用“名称”和“ID”属性返回的。

Answer 4

尝试从选择框中删除 size="1" 属性和/或设置具有更大宽度的样式属性。选择的生成元素的宽度基于底层选择框的宽度，因此如果您的选择框非常小，选择的选择也会如此。希望有帮助。

Answer 5

遇到了类似的问题。我无法弄清楚在我的情况下这有效的原因是什么：

$j('select').livequery(
    function(){
        $j(this).chosen({width: "300"});
        $j('.search-field input').height(14);

    }, 
    function(){
         //remove event
    });

Answer 6

将 jQuery 代码包装在里面：-

$(document).ready(function(){
  $('.chosenElement').chosen();
});

Answer 7

有关所选选项的文档包括：

如果您的选择在实例化 Chosen 时隐藏，则必须指定
宽度或选择将以 0 的宽度显示。

。为了避免出现零宽度字段，您需要使用“宽度”选项，或者确保在调用 Chosen 时原始选择可见。