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

╰+攻爆jí腚メ 2023-02-21 14:25 67阅读 0赞

jquery城市选择控件

![jQuery Chosen Plugin][]

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][] [观看演示][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`元素：

<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>
    
    
    <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][] [观看演示][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][https_davidwalsh.name_jquery-chosen]

jquery城市选择控件

[jQuery Chosen Plugin]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9qcXVlcnktY2hvc2VuLnBuZw?x-oss-process=image/format,png
[Harvest]: http://www.getharvest.com/
[View Demo]: https://davidwalsh.name/demo/jquery-chosen.php
[https_davidwalsh.name_jquery-chosen]: https://davidwalsh.name/jquery-chosen