`
zl07104
  • 浏览: 7937 次
社区版块
存档分类
最新评论

chosen插件使用

阅读更多
    Chosen 是一个JavaScript插件,它对select选择框增加主动筛选的功能,可对列表进行分组,同时也可禁用某些选择项。目前,它支持 jQuery 和 Prototype 两种JavaScript引擎。
    示例:https://harvesthq.github.io/chosen/
    使用Chosen版本1.6.1。
    一、页面引入Chosen插件库
   
<!-- chosen插件 -->
<script type="text/javascript" src="${ctx}/resource/js/chosen/chosen.jquery.js"></script>
<link href="${ctx}/resource/js/chosen/chosen.css" rel="stylesheet" type="text/css" />

    二、初始化插件
   
$('.chosen').chosen({
    width: "150px",
	search_contains: true,//true-可根据中间字段模糊查询
	no_results_text: "没有匹配结果"
});

   
<select class="chosen" id="schoolId" name="schoolId" 
onchange="checkSchool()" style="width:150px;" data-placeholder="-请选择学校-">
	<option></option>
</select>

    遇到问题:
    1、chosen下拉框width为0px,如图所示:
   
    解决:$('.chosen').chosen()设置width,如上面js代码所示。
    也可修改chosen.css文件中样式添加width 150px !important:
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 150px !important;//解决width未0px问题
}

    2、data-placeholder属性不生效
    解决:需添加空选项<option></option>,如上面html代码所示。
    三、动态更新ajax从后台传递过来数据,使用trigger("chosen:updated")
  
function querySchool() {
	var county = $("#district").val();
	$.ajax({ 
		type:'post', 
           url:'${ctx}/school/findSchoosJson',
           dataType:"json", 
           data:{"county":county},
           success:function(data){
               $("#schoolId").empty();
               $("#schoolId").append('<option></option>');
               $.each(data, function (idx, obj) {
                      $("#schoolId").append('<option value="' + obj.id + '">' + obj.name + '</option>');
                  });
                  $("#schoolId").trigger("chosen:updated");//更新下拉选项
           }, 
           error:function(data){
               alert("error"); 
           }
       });
}

   
分享到:
评论

相关推荐

    下拉框美化插件chosen

    `chosen-sprite.png`是Chosen插件中使用的图标精灵图,包含了各种状态下的图标,如关闭、开启、搜索等,用于增强用户界面的视觉反馈。 总结来说,Chosen是一个强大的下拉框美化工具,它通过丰富的功能和优秀的用户...

    Jquery select 插件 chosen

    Chosen插件的使用首先需要引入jQuery库,然后引入Chosen的CSS和JS文件。在项目中,我们通常会使用`chosen.css`和`chosen.jquery.js`,对于生产环境,可以选择压缩后的`chosen.min.css`和`chosen.jquery.min.js`以...

    chosen插件的源代码

    在本篇文章中,我们将深入探讨Chosen插件的源代码、CSS样式和JavaScript功能,以及如何在页面中应用它。 首先,让我们了解Chosen插件的核心功能。Chosen的主要目标是通过提供一个可搜索、可折叠和可自定义样式的...

    Asp.net MVC Chosen插件源码实例

    asp.net MVC chosen插件源码实例 此项目可作为学习asp.net MVC项目 或学习chosen插件的实例 带有数据库 特色为运用了chosen插件 本项目中在Orders/Details/页面中Carton No和Article No为chosen插件的运用

    jquery-chosen.js插件

    下面将详细介绍jQuery Chosen插件的核心功能、安装方法、使用技巧以及常见问题。 ### 一、核心功能 1. **模糊搜索**:Chosen插件的标志性特性,允许用户在下拉选项中输入关键词进行实时模糊匹配,提高了查找特定...

    chosen下拉选择插件.rar

    Chosen插件提供了更易于使用的界面,包括搜索过滤、多选支持以及更好的触屏设备兼容性。 **Chosen插件的核心特性:** 1. **搜索过滤**:在大型下拉列表中,Chosen允许用户输入关键词进行实时搜索,快速定位到所需...

    chosen jquery 下拉查询插件

    6. **易于集成**:只需要引入相应的JavaScript和CSS文件,然后通过简单的配置即可启用Chosen插件。 在压缩包"chosen-master"中,通常会包含以下内容: 1. **Chosen的源代码**:包括JavaScript文件(chosen.jquery....

    chosen.jquery.js

    chosen_v1.2.0.zip ...jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索,多个标签编辑等功能 下载地址:https://github.com/harvesthq/chosen/releases

    chosen增强化使用

    在实际项目中,你可以通过引入Chosen增强版的JS和CSS文件,然后在HTML的select元素上应用Chosen插件,通过配置相应的属性和方法来实现所需的功能。同时,不要忘记在文档中添加适当的JavaScript代码来初始化和操作...

    angular-chosen:这个项目展示了 AngularJS 和 Chosen 插件的集成

    **AngularJS与Chosen插件集成详解** 在前端开发中,AngularJS是一个强大的MVC(模型-视图-控制器)框架,它简化了构建动态Web应用的过程。而Chosen插件是一款优秀的下拉选择框增强工具,能为HTML Select元素提供更...

    jquery-chosen

    要使用jQuery Chosen插件,首先需要在页面中引入jQuery库和Chosen的CSS及JavaScript文件。然后,通过简单的jQuery代码对选择框应用Chosen效果: ```html &lt;link rel="stylesheet" href="chosen.min.css"&gt; ...

    Chosen 基于jquery的选择框插件使用方法

    使用Chosen插件时,开发者应该注意确保在操作select元素之后,调用Chosen的chosen()方法,以确保插件能够对新的select状态进行更新。这是因为Chosen在初始化时会对select元素做一次封装,如果开发者在后续的操作中...

    基于chosen插件实现人员选择树搜索自动筛选功能

    chosen插件已经可以实现1中的大部分效果,我们只需要预先获取数据,实现左右两侧一 一对应,最后点击发送获取最终的数据集合ID 具体实现 chosen需要的html结构 //只需要提供包含数据的select标签即可,该select默认...

    Bootstrap和chosen集成jQuery下拉框插件

    这是一款Bootstrap和chosen集成jQuery下拉框插件。该插件利用chosen的样式和bootstrap下拉框的功能,集成出新的下拉框效果。该下拉框支持单项选择和多项选择,支持搜索和分组功能。

    chosen.jquery.rar

    一个可以美化下拉框,并且支持模糊查询的下拉框搜索jquery插件 下载地址 https://github.com/harvesthq/chosen/releases 官方文档配置 https://harvesthq.github.io/chosen/options.html 官方文档说明 ...

    jQuery Bootstrap和chosen集成下拉框插件特效.zip

    Bootstrap的下拉菜单组件(Dropdown)在网页设计中广泛应用,但默认样式可能无法满足所有需求,这就需要引入Chosen插件。 Chosen是一款针对原生HTML选择器优化的插件,尤其适合处理大量的选项或多选下拉框。它提供...

    chosen多选select

    - `index.proto.html` 和 `index.html` 是展示Chosen基本用法的示例页面,它们展示了如何在HTML中引入Chosen并初始化插件。 - `options.html` 可能包含了更多关于配置选项的示例,展示了如何通过JavaScript设置...

    强大的jquery模拟选择框插件Chosen实现了选项分组.zip

    下面我们将深入探讨Chosen插件的核心特性、使用方法以及其在前端开发中的应用。 1. **核心特性** - **自适应高度**:Chosen会自动调整其高度以适应所有可见选项,避免滚动条的出现。 - **搜索功能**:内置搜索框...

    Chosen资源

    Chosen是一款广泛使用的前端选择器插件,它旨在改善原生HTML `&lt;select&gt;` 元素的用户体验。这款插件由 Harvest 公司开发,通过提供可搜索、可滚动的下拉菜单,使用户在大型选项列表中查找和选择项目变得更加容易。 *...

Global site tag (gtag.js) - Google Analytics