jquery城市选择控件_jQuery选择插件

jquery城市选择控件

Without a doubt, my least favorite form element is the SELECT element.  The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster.  Needless to say, whenever a developer goes the extra mile to offer solution to these issues, a big smile gets painted on my face.  Harvest recently released Chosen, a SELECT enhancer which offers autosuggest, search, stylability, and an elegant solution for multiple selection.  Better yet, Chosen is available for both jQuery and Prototype.  Let's take a look at how to use Chosen!

毫无疑问，我最不喜欢的form元素是SELECT元素。 该元素几乎是无法样式化的，在各个平台上看起来都不同，具有不一致的值访问权限，而由multiple=true导致的灾难就是灾难。 不用说，每当开发人员付出更多努力为这些问题提供解决方案时，我的脸上都会露出灿烂的笑容。 Harvest最近发布了SELECT增强器Chosen，它提供了自动建议，搜索，样式设置以及多种选择的优雅解决方案。 更好的是，Chosen适用于jQuery和Prototype。 让我们来看看如何使用选择！

View Demo 观看演示

HTML (The HTML)

Chosen uses true SELECT elements as the base for its construction, so create your SELECT and OPTION elements as usual:

Chosen使用真正的SELECT元素作为其构造的基础，因此请照常创建SELECT和OPTION元素：

<!-- single dropdown -->
<select class="chosen" style="width:200px;">
	<option>Choose...</option>
	<option>jQuery</option>
	<option selected="selected">MooTools</option>
	<option>Prototype</option>
	<option>Dojo Toolkit</option>
</select>

<!-- multiple dropdown -->
<select class="chosen" multiple="true" style="width:400px;">
	<option>Choose...</option>
	<option>jQuery</option>
	<option selected="selected">MooTools</option>
	<option>Prototype</option>
	<option selected="selected">Dojo Toolkit</option>
</select>

As expected, Chosen respects the selected attribute and selects the desired values during construction.

正如预期的那样，Chosen尊重selected属性并在构造过程中选择所需的值。

jQuery JavaScript (The jQuery JavaScript)

The jQuery usage is as you would expect:

jQuery的用法与您期望的一样：

jQuery(document).ready(function(){
	jQuery(".chosen").chosen();
});

The plugin detects the multiple designation and creates a Facebook-style display, otherwise creates a standard-looking SELECT element with search capabilities.  Chosen also responds to keyboard commands for selection. Brilliant!  To change the placeholder text of the given multiple SELECT, update the placeholder data for the given node:

该插件检测到多个指定并创建Facebook风格的显示，否则创建具有搜索功能的标准外观SELECT元素。 选择还响应键盘命令进行选择。 辉煌！ 要更改给定多个SELECT的占位符文本，请更新给定节点的占位符数据：

jQuery(document).ready(function(){
	jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();
});

I recommend updating the placeholder as the default "Select Some Options" isn't the most pleasing of messages.

我建议更新占位符，因为默认的“选择某些选项”不是最令人高兴的消息。

View Demo 观看演示

Chosen isn't quite perfect;  I'd like to see a maxSelectedOptions option, and possibly an "error" or "required" CSS state.  Outside of those small criticisms, I think Chosen is a solid piece of work.  Being offered in both jQuery and Prototype is a bonus for users of both JavaScript frameworks.  If you hate SELECT elements as much as I do, give Chosen a try!

选择不是很完美。 我想看到一个maxSelectedOptions选项，可能还有一个“错误”或“必需”CSS状态。 除了这些小小的批评之外，我认为选择是一项可靠的工作。 jQuery和Prototype都提供给两个JavaScript框架的用户都是一个好处。 如果您像我一样讨厌SELECT元素，请尝试选择！

翻译自: https://davidwalsh.name/jquery-chosen

jquery城市选择控件