jquery城市选择控件_jQuery选择插件 ╰+攻爆jí腚メ 2023-02-21 14:25 54阅读 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`元素: <!-- 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][] [观看演示][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
还没有评论,来说两句吧...