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

2024-11-29 15:30:07

Chosen插件下载地址 http://www.jb51.net/jiaoben/38027.html

代码如下:

应用JS文件

代码如下:

<select class="chzn-select" data-placeholder="Choose a Country" style="width:350px;" tabindex="1">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>

class设这为chzn-select

初始化：$(".chzn-select").chosen();

对select进行操作时候需注意如下：先删除外部套用的层在经常操作，最后在加上$(".chzn-select").chosen();

代码如下:

var selectObj = $("#slectplat");
selectObj.parent().children().remove('div');
selectObj.removeClass();
$("#slectplat").val(_plat);
selectObj.addClass("chzn-select");
selectObj.chosen();

jQuery中Chosen三级联动功能实例代码

Chosen 是一个JavaScript插件,它能让丑陋的.很长的select选择框变的更好看.更方便,不仅如此,它更扩大了,增长了主动筛选的功能. 本文介绍Chosen联动,具体代码如下: var addressResolve = function (options) { //检测用户传进来的参数是否合法 if (!isValid(options)) return this; //默认参数 var defaluts = { proId: 'divProv', cityId: 'divCity'
Jquery chosen动态设置值实例介绍

Jquery chosen 地址:https://github.com/harvesthq/chosen 一款选择插件,支持检索,多选,但不支持输入效果如下图确定是用的这个哦, 不然可往下看也没有什么意义了突然发现如果用在省市选择发现有如下问题: 1,不能动态设置值 2,不能动态设置选中看了好几遍API愣是米有发现有方法可以直接调用.没办法就看源码,发现在其初始化的时候有一个判断如下图: 发现有个destroy是不是("#city).chosen("destroy"
Chosen 基于jquery的选择框插件使用方法

Chosen插件下载地址 http://www.jb51.net/jiaoben/38027.html 复制代码代码如下: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="chosen/chosen.jquery.js&qu
基于bootstrap的选择框插件icheck

本文实例为大家分享了bootstrap icheck选择框插件,供大家参考,具体内容如下 icheck官网:http://www.bootcss.com/p/icheck/#skin-square 1.到官网下载Icheck压缩包. 2.解压后找到 icheck.min.js, jquery.js, zepto.js 以及skins文件夹,复制到自己的项目中 3.在项目中引用 <link rel="stylesheet"href="icheck/skins/minima
基于jQuery下拉选择框插件支持单选多选功能代码

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu
基于jQuery的消息提示插件之旅 DivAlert(三)

本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本复制代码代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200
基于jQuery的消息提示插件 DivAlert之旅（二）

改进的代码部分主要如下: 1.创建default.css文件: 代码复制代码代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid
Jquery日期选择datepicker插件用法实例分析

本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigTe
jquery弹出框插件jquery.ui.dialog用法分析

本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保) 支持缩略图支持标题显示支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载纯JS版本: 下载地址:https://github.com/fengyuanchen/
基于jQuery创建鼠标悬停效果的方法

本文实例讲述了基于jQuery创建鼠标悬停效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 创建HTML: <ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul> 2. 选择.mainnav的class: $(".mainnav&qu
jquery实现input框获取焦点的方法

获取表单焦点变色 //.login-form表单样式类 //.item input输入框父div // focus是要添加的样式类 $(".login-form").on("focus", "input", function(){ $(this).closest('.item').addClass('focus'); }).on("blur","input",function(){ $(this).clos

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

相关推荐

随机推荐