Chosen

前言:

想要达到下拉框有多选的情况。

过程:

1.因为本次工作项目使用的是surperUI,而它则是基于bootstrap框架搭建而成的。于是自然而然的就想到了使用bootstrap中的select插件。可是因为不太熟悉该框架的使用方法,于是看了一下使用方法,就上手写代码了。知道最终研究细节时,才发现出现了一些问题:

首先,不会取到select的value值;其次,不会回显其值。反复考量之后,才决定摒弃这哥熟知的方法,而选择另外一款方便好用的插件——Jquery chosen。

2.关于Jquery chosen的介绍(https://harvesthq.github.io/chosen/):

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.(chosen是一个jQuery插件:它会使冗长笨重的选择框变得更加的友好。)

因为它有较多是介绍,以及相对比较全面的api,所以使用起来就相当方便。比如:

1)在页面中只需引入相应文件即可:

...
    <link href="chosen.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="chosen.jquery.js"></script>
...

2)在html中创建相应的select元素:

...
<select name="cidt" style="width:150px;" id="cid" class="cid_select" placeholder="请选择">
    <option value="1">西安</option>
    <option value="">厦门</option>
    <option value="3">成都</option>
    <option value="4">重庆</option>
    <option value="5">南宁</option>
</select>
...

3)然后在script

时间: 2024-10-06 19:39:00

Chosen的相关文章

jQuery Chosen 使用

1.  jQuery Chosen 选择框下拉值重置: //重置 $("#easySelBrands").val("默认值").trigger("chosen:updated"); 赋值为默认值后要用trigger("chosen:updated")更新,否则无效: 2. 多个select在一起的问题 在chosen.jquery.js中找到此方法: 1 Chosen.prototype.activate_field 2 =

chosen 下拉框

$("#teams").trigger("liszt:updated");//更新重新绑定                            $("#teams").chosen() Chosen 选项列表  地址:https://github.com/amazeui/chosen/blob/master/docs/options.md demo.html Chosen 选项列表 通过参数传递的选项 以下参数在实例化的时候通过参数设置. $(

Chosen中选择项的更新

Chosen 选择项的动态修改/更新 如果你需要去动态更新select选择框里的选择项,你需要通知Chosen去响应这个变动,你需要在这个选项框是触发一个"liszt:updated"事件,这样Chosen就会对更新过内容后的select选择框重新进行渲染. jQuery 版:$("#form_field").trigger("liszt:updated"); Prototype 版:Event.fire($("form_field&q

Missing styles. Is the correct theme chosen for this layout? Use the Theme combo box above the layou

android无法静态显示ui效果. Missing styles. Is the correct theme chosen for this layout? Use the Theme combo box above the layout to choose a different layout, or fix the theme style references. Failed to find style 'textViewStyle' in current theme 採用的解决方法例如以

[2016-3-18]OMG美语每日笔记-Hava you ever felt so devastated after not being chosen by a club you really want to be in.

坚持~坚持~坚持~! I am totally devastated. 我都要快崩溃了. I wasn't chosen to be in our school choir.I love singing and that is all I want to do.I am totally devastated. 我没有选上学校的合唱队,我喜欢唱歌,而且我只想唱歌.我都要崩溃了 That's such a shame. 太可惜了. That's such a shame.I know how muc

chosen PersistenceUnitInfo does not specify a provider class name

org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'userServiceImpl': Injection of persistence fields failed; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with na

intellij idea android错误: Missing styles. Is the correct theme chosen for this layout?

Missing styles. Is the correct theme chosen for this layout? Use the Theme combo box above the layout to choose a different layout, or fix the theme style references. 解决办法:

带搜索的下拉框Chosen

一:参考 https://harvesthq.github.io/chosen/ Chosen是一个jQuery插件 二:引入js文件 <link href="plug-in/chosen_v1.6.2/chosen.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="plug-in/chosen_

JQuery Plugin serials (1)--- Harvest Chosen

一.Download harvest chosen from github https://github.com/harvesthq/chosen/ 二.在页面引用 @using (Html.BeginForm()) { <fieldset> <legend>Multi-Select Demo</legend> <div class="editor-field"> @Html.ListBox("Countries",