selected.js :: 有人有实际的工作示例吗？答案

【问题标题】：chosen.js :: Does anyone have an actual working example?selected.js :: 有人有实际的工作示例吗？
【发布时间】：2011-09-26 22:10:40
【问题描述】：

有没有人使用和定制过一些基本的 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 分钟实施”上浪费了太多时间，所以我需要寻求 soem 的帮助。

https://github.com/harvesthq/chosen

【问题讨论】：

对于寻找Chosen.js 的在线托管库的任何人，请参阅cdnjs.com/libraries/chosen

标签： jquery jquery-plugins jquery-chosen

【解决方案1】：

如果你真的想测试“最基本”的例子，我建议：

处理硬编码的 HTML（相对于动态添加的 html）
从select 元素中删除所有属性
只有在基本示例运行良好时才将属性添加回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 获取这些文件（javascript 和 css）的 URL

【讨论】：

【解决方案2】：

你必须针对选择

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

jsFiddle

【讨论】：

感谢您的反馈。也许您可以再看一下我在问题中的代码示例。最后一行代码声明我正在调用 $('.chosenElement').chosen();。我错过了什么吗？
我的错，我没有读过折叠。该代码工作正常jsfiddle.net/vWKrv/2
你很有趣。我有时也会做同样的事情。不管怎么说，还是要谢谢你。 ;-)

【解决方案3】：

当您动态填充该字段时，JSON 结果集是否带有“Text”和“Value”属性？如果不是，Chosen 将不会在其列表中正确格式化结果。事实上，它根本不会添加它们。我很难学到这一点，因为我的结果最初是用“名称”和“ID”属性返回的。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

将 jQuery 代码包装在里面：-

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：