Chosen 是一个JavaScript插件，它能让丑陋的、很长的select选择框变的更好看、更方便。目前，它支持 jQuery 和 Prototype 两种JavaScript引擎。
在GitHub上的官网
标准选项框效果对比
原始样子
美化后效果：
多选选择框对比效果
原始样子
美化后效果
<optgroup> 标记的支持
分组select单选效果
分组select多选效果
对 Selected 和 Disabled 属性的支持
Chosen 会自动的把 selected 和 disabled 选择项去掉。
单项选择
多项选择
对缺省显示文字的支持
在select标签上加入 data-placeholder='...' 属性和值，Chosen 会自动读取这个值作为缺省显示文字。如果你没有提供 data-placeholder='...' 这样的属性和值，它会缺省显示“请选择”。你可以在这个js插件源文件里修改这个值。
<select data-placehoder="选择国家..." style="width:350px;" multiple class="chzn-select"">
注意： 对于单项选择框，浏览器通常缺省显示选择项的第一项，如果你想使用Chosen插件的缺省显示效果，你需要把选择项的第一项的值和内容都留作空白。
对右对齐的支持
Chosen支持对选择项的左对齐显示效果。你只需要在Select标签上加入class属性里再加入"chzn-rtl"就行了。
<select class="chzn-select chzn-rtl">
单选框的右对齐
对选框的右对齐
对Change事件/Update事件的支持
-
对Change事件的响应
在进行表单操作时，你经常会遇到一些在某些选择项被选中，或选择项改变时，去触发某些操作的情况。而在Chosen里，用户在任何时候选中一个选择项时，都会触发一个change事件。你可以这样去写这个change操作：
$("#form_field").chosen().change( … );
注意： 因为Prototype不支持标准浏览器里的事件触发，如果你使用Prototype作为JavaScript引擎，你需要使用Event.simulate来实现事件触发。
-
Chosen 选择项的动态修改/更新
如果你需要去动态更新select选择框里的选择项，你需要通知Chosen去响应这个变动，你需要在这个选项框是触发一个"liszt:updated"事件，这样Chosen就会对更新过内容后的select选择框重新进行渲染。
- jQuery 版:
$("#form_field").trigger("liszt:updated");
- Prototype 版:
Event.fire($("form_field"), "liszt:updated");
为什么要使用Chosen？
开发人员使用方法
Chosen用起来非常的简单。
- 下载这个插件，把相关文件拷贝的你的应用里。
- 激活这个插件：
- jQuery 版: 直接调用 chosen 插件 -
$(".chzn-select").chosen()
- Prototype 版: 在选择框是加入属性class='chzn-select'即可。
常见问题
-
好像不好用，你们能不能修改一下？
好的，请把问题提交到GitHub issue tracking tool。提交的信息里请包括插件的版本(jQuery还是Prototype)，浏览器和操作系统。你提供的信息越丰富，越有助于我们尽快的解决问题。
-
这个插件支持哪些浏览器？
所有的新式的浏览器都支持(Firefox, Chrome, Safari and IE9)。对传统的IE8，IE7，IE6也可以用。
感谢
