jQuery selected.js :: 有人有实际的工作示例吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7561958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
chosen.js :: Does anyone have an actual working example?
提问by Shawn Spencer
Has anyone used and customized some basic chosen.js code?
有没有人使用和定制过一些基本的 selected.js 代码？
I have downloaded the js, css and png, copied some code from the examples, wrote my own super-simple example, but I must be missing something. I have verified that the code.jquery.js is included and gets loaded, same with the chosen.css.
我已经下载了 js、css 和 png，从示例中复制了一些代码，编写了我自己的超级简单示例，但我一定遗漏了一些东西。我已经验证了 code.jquery.js 已包含并被加载，与 selected.css 相同。
When I try to bring up even an extremely simple SELECT field (drop-down), I get a very small field, and clicking the field does nothing. When I disable chosen.js, I simply get the SELECT with all the options displayed.
当我尝试调出一个非常简单的 SELECT 字段（下拉菜单）时，我会得到一个非常小的字段，单击该字段没有任何作用。当我禁用 selected.js 时，我只是获得了显示所有选项的 SELECT。
Here's how I add a simple SELECT within jQuery (I have to populate the field dynamically, although in this example it's all hard-coded):
下面是我如何在 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>';
Then, right when I display the modal dialog box containing the options, I call:
然后，当我显示包含选项的模式对话框时，我调用：
$('.modal-body').html($html);
$('.chosenElement').chosen();
So far, I have modified and tested all kinds of permutations, Googled for solutions or examples, but nothing seems to work. It's probably something very silly, like a missing semi-colon somewhere, but I've wasted so much time on this "10-minute implementation" that I need to ask for soem help.
到目前为止，我已经修改和测试了各种排列，谷歌搜索解决方案或示例，但似乎没有任何效果。这可能是非常愚蠢的事情，比如某处缺少分号，但我在这个“10 分钟的实现”上浪费了太多时间，我需要寻求帮助。
回答by Adrien Be
If you really want to test the "most basic" example, I'd suggest:
如果你真的想测试“最基本”的例子，我建议：
- Work on hardcoded HTML (vs dynamically added html)
- Remove all the attributes from the
selectelement - Only add back the attributes to the
selectelement once a basic example runs fine.
- 处理硬编码的 HTML（与动态添加的 html）
- 从
select元素中删除所有属性 - 只有
select在基本示例运行良好后才将属性添加回元素。
Note that the multiple="multiple"attribute on the selectelement does make chosen.jsbehave differently.
请注意，元素上的multiple="multiple"属性select确实具有chosen.js不同的行为。
I have ran your code here: http://jsfiddle.net/99Dkm/1/
我在这里运行了你的代码：http: //jsfiddle.net/99Dkm/1/
And it works just fine.
它工作得很好。
I suspect the problem is not chosen.jslibrary but rather how you use it (wrapping inside some basic jQuery onready function missing or else).
我怀疑问题不在于chosen.js库，而在于您如何使用它（包装在一些基本的 jQuery onready 函数中，否则会丢失）。
Notice that in my working examples on jsFiddle I only included chosen.css& chosen.jquery.js.
请注意，在我关于 jsFiddle 的工作示例中，我只包含chosen.css& chosen.jquery.js。
note: get the URLs for those files (javascript & css) from http://cdnjs.com/libraries/chosen
注意：从http://cdnjs.com/libraries/chosen获取这些文件的 URL（javascript 和 css）
回答by rpeh
The documentation on Chosen options includes:
所选选项的文档包括：
If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.
如果在实例化 Chosen 时隐藏了选择，则必须指定宽度，否则选择将显示为宽度为 0。
To avoid a zero-width field appearing, you need to use the "width" option, or make sure your original Select is visible when you call Chosen.
为避免出现零宽度字段，您需要使用“宽度”选项，或确保在调用 Chosen 时您的原始 Select 可见。
回答by WEFX
When you populate the field dynamically, is the JSON result set coming back w/ "Text" and "Value" attributes? If it's not, Chosen will not format the results properly within its list. In fact, it won't add them at all. I learned this the hard way because my results were initially coming back w/ "Name" and "ID" attributes instead.
当您动态填充该字段时，JSON 结果集是否返回带有“文本”和“值”属性？如果不是，Chosen 将不会在其列表中正确格式化结果。事实上，它根本不会添加它们。我以艰难的方式学到了这一点，因为我的结果最初是通过“名称”和“ID”属性返回的。
回答by Aaron Hill
Try removing the size="1" attribute from the select box and/or setting a style attribute with a larger width. Chosen bases the width of the generated elements on the width of the underlying select box so if your select box is very small, the Chosen select will be as well. Hope that helps.
尝试从选择框中删除 size="1" 属性和/或设置具有更大宽度的样式属性。Chosen 将生成元素的宽度基于底层选择框的宽度，因此如果您的选择框非常小，Chosen 选择也会如此。希望有帮助。
回答by Sangram Singh
wrap the jQuery code inside :-
将 jQuery 代码包裹在里面：-
$(document).ready(function(){
$('.chosenElement').chosen();
});
回答by user2909409
Ran into a similar problem. I wasn't able to figure out what was causing it by in my situation this worked:
遇到了类似的问题。在我的情况下，我无法弄清楚是什么导致它起作用：
$j('select').livequery(
function(){
$j(this).chosen({width: "300"});
$j('.search-field input').height(14);
},
function(){
//remove event
});
