select实现多选下拉框功能 excel下拉框实现复选
早上好，朋友们！今天给大家带来八种选择下拉选择特效源码！日常工作中会经常遇到！你可以根据自己的意愿随心所欲的制作！想要文件版本的源代码可以私聊！废话不多说，获取源代码！JS:/***
早上好，朋友们！
今天给大家带来八种选择下拉选择特效源码！
日常工作中会经常遇到！
你可以根据自己的意愿随心所欲的制作！
想要文件版本的源代码可以私聊！
废话不多说，获取源代码！
JS:/**
* selectFx.js v1.0.0
* http://www.codrops.com
*
*根据麻省理工学院许可证授权。
* http://www.opensource.org/licenses/mit-license.php
*
*版权所有2014，Codrops
* http://www.codrops.com
*/
；(功能(窗口){
‘使用严格的’；
/**
*基于https://github . com/inuyaksa/jquery . nice scroll/blob/master/jquery . nice scroll . js
*/
函数有Parent( e，p ) {
如果(！e)返回false
var El = e . target | | e . srcelement | | e | | false；
而(el & amp& amp埃尔。= p) {
el = el.parentNode | | false
}
return (el！= =假)；
};
/**
*扩展对象函数
*/
函数扩展(a，b ) {
for(b中的变量键){
if( b.hasOwnProperty( key ) ) {
a[key]= b[key]；
}
}
返回a；
}
/**
*选择Fx功能
*/
功能选择Fx( el，options ) {
this.el = el
this.options = extend( {}，this . options)；
extend( this.options，选项)；
这个。_ init()；
}
/**
*选择外汇选项
*/
SelectFx.prototype.options = {
//如果为true，所有链接将在新标签中打开。
//如果我们希望在单击某个选项时被重定向，我们需要在本机select元素的选项上定义一个数据链接属性
newTab:没错，
//打开select元素时，显示默认占位符(如果有)
stickyPlaceholder:对，
//更改值时回调
onChange : function( val ) {返回false}
}
/**
*初始化函数
*初始化并缓存一些变量
*/
select FX . prototype . _ init = function(){
//检查我们是否正在使用本机选择框的占位符
//我们假设默认情况下占位符被禁用并选中
var selected opt = this . El . query selector(‘选项[已选择]’);
this . hasdefaultplaceholder = selected opt && ampselected opt . disabled；
//获取选中的选项(attr选中的第一个选项或仅第一个选项)
this . selected opt = selected opt | | this . El . query selector(‘选项’);
//创建结构
这个。_ create selectel()；
//所有选项
this . selopts =[]. slice . call(this . selel . query selectorall(‘李[数据选项]’) );
//选项总数
this . selopts count = this . selopts . length；
//当前索引
this . current = this . selopts . index of(this . selel . query selector(‘李. cs-精选’) ) || -1;
//占位符元素
this . sel placeholder = this . selel . query selector(‘span . cs-placeholder ’);
//初始化事件
这个。_ init events()；
}
/**
*为选择元素创建结构
*/
select FX . prototype . _ create selectel = function(){
var self = this，options = & # 8221，createOptionHTML = function(el) {
var optclass = & # 8221，classes = & # 8221，link = ”
if(El . selected opt && amp！this.foundSelected & amp& amp！this.hasDefaultPlaceholder ) {
classes+= ‘cs-精选‘；
this.foundSelected = true
}
//额外的类
if(El . getattribute(‘数据级’) ) {
classes+= El . getattribute(‘数据级’);
}
//链接选项
if(El . getattribute(‘数据链’) ) {
link = & # 8216数据链接= ’+El . getattribute(‘数据链’);
}
如果(类！== ”) {
optclass = & # 8216class = & # 8221‘+classes+‘”‘；
}
return & # 8216& lt李‘+opt class+link+‘数据选项数据值= ”‘+El . value+‘”& gt& ltspan & gt’+El . text content+‘& lt/span>。& lt/李& gt’；
};
[].slice.call( this.el.children)。forEach(函数(el) {
if(El . disabled){ return；}
var tag = El . tagname . tolowercase()；
if(tag = = = ‘选项’) {
options+= createOptionHTML(El)；
}
else if(tag = = = ‘optgroup & # 8217) {
选项+= ‘& lt李班= ”cs-opt group ”& gt& ltspan & gt’+El . label+‘& lt/span>。& ltul & gt’；
[].slice.call( el.children)。forEach(函数(可选){
options+= createOptionHTML(opt)；
} )
选项+= ‘& lt/ul >& lt/李& gt’；
}
} );
var opts _ el = & # 8216& ltdiv class = & # 8221cs-options ”& gt& ltul & gt’+选项+‘& lt/ul >& lt/div >’；
this . selel = document . createelement(‘div & # 8217);
this . selel . class name = this . El . class name；
this . selel . tabindex = this . El . tabindex；
this . selel . innerhtml = ‘& ltspan class = & # 8221cs-占位符”& gt’+this . selected opt . text content+‘& lt/span>。’+opts _ El；
this . El . parent node . appendchild(this . selel)；
this . selel . appendchild(this . El)；
}
/**
*初始化事件
*/
select FX . prototype . _ init events = function(){
var self = this
//打开/关闭选择
this . sel placeholder . addevent listener(‘点击’，函数(){
自我。_ toggleSelect()；
} );
//单击选项
this . selopts . foreach(function(opt，idx) {
opt . addevent listener(‘点击’，函数(){
self.current = idx
自我。_ change option()；
//关闭选择元素
自我。_ toggleSelect()；
} );
} );
//如果目标不是select元素或其后代之一，则关闭select元素..
document . addevent listener(‘点击’，功能(电动){
var target = ev.target
如果(自我。_ iso pen()&& amp目标！= = self.selEl & amp& amp！hasParent( target，self.selEl ) ) {
自我。_ toggleSelect()；
}
} );
//键盘导航事件
this . selel . addevent listener(‘keydown & # 8217，功能(电动){
var key code = ev . key code | | ev . which；
开关(键码){
//向上键
案例38:
ev . prevent default()；
自我。_ navigate opts(‘prev & # 8217);
打破；
//向下键
案例40:
ev . prevent default()；
自我。_ navigate opts(‘接下来’);
打破；
//空格键
案例32:
ev . prevent default()；
如果(自我。_ iso pen()&& amptype of self . pressel current！= ‘未定义’& amp& ampself.preSelCurrent！== -1 ) {
自我。_ change option()；
}
自我。_ toggleSelect()；
打破；
//输入键
案例13:
ev . prevent default()；
如果(自我。_ iso pen()&& amptype of self . pressel current！= ‘未定义’& amp& ampself.preSelCurrent！== -1 ) {
自我。_ change option()；
自我。_ toggleSelect()；
}
打破；
// esc键
案例27:
ev . prevent default()；
如果(自我。_isOpen() ) {
自我。_ toggleSelect()；
}
打破；
}
} );
}
/**
*使用向上/向下键导航
*/
select FX . prototype . _ navigateOpts = function(dir){
如果(！这个。_isOpen() ) {
这个。_ toggleSelect()；
}
var tmp current = type of this . presel current！= ‘未定义’& amp& ampthis.preSelCurrent！== -1 ?this . presel current:this . current；
if(dir = = = ‘prev & # 8217& amp& amptmpcurrent & gt0 | | dir = = = & # 8216接下来’& amp& amptmpcurrent & ltthis.selOptsCount & # 82111 ) {
//保存预先选择的当前–如果我们单击选项，或按enter，或按space，这将是当前选项的索引
this . presel current = dir = = = ‘接下来’？tmp current+1:tmp current –1;
//删除焦点类(如果有)..
这个。_ remove focus()；
//添加类焦点–跟踪我们正在导航的选项
classie . add(this . selopts[this . presel current]，‘cs-focus ’);
}
}
/**
*打开/关闭选择
*打开时显示默认占位符(如果有)
*/
select FX . prototype . _ toggle select = function(){
//删除焦点类(如果有)..
这个。_ remove focus()；
如果(这个。_isOpen() ) {
如果(this.current！== -1 ) {
//更新占位符文本
this . sel placeholder . text content = this . selopts[this . current]。文本内容；
}
classie.remove( this.selEl，‘cs-active ’);
}
否则{
if(this . hasdefaultplaceholder && ampthis . options . sticky placeholder){
//每次打开时，我们都希望看到默认的占位符文本
this . sel placeholder . text content = this . selected opt . text content；
}
classie.add( this.selEl，‘cs-active ’);
}
}
/**
*更改选项–新值已设定
*/
select FX . prototype . _ change option = function(){
//如果预选当前(如果我们用键盘导航)…
if(type of this . pressel current！= ‘未定义’& amp& ampthis.preSelCurrent！== -1 ) {
this . current = this . presel current；
this . presel current =-1；
}
//当前选项
var opt = this . selopts[this . current]；
//更新当前选择的值
this . sel placeholder . text content = opt . text content；
//更改本机select元素的值
this . El . value = opt . getattribute(‘数据价值’);
//从旧的选定选项中删除cs-selected类，并将其添加到当前选定的选项中
var old opt = this . selel . query selector(‘李. cs-精选’);
if( oldOpt ) {
classie.remove( oldOpt，‘cs-精选’);
}
classie.add( opt，‘cs-精选’);
//如果定义了链接
if(opt . get attribute(‘数据链’) ) {
//在新标签页中打开？
if( this.options.newTab ) {
window . open(opt . get attribute(‘数据链’), ‘_ blank & # 8217);
}
否则{
window . location = opt . getattribute(‘数据链’);
}
}
//回调
this . options . onchange(this . El . value)；
}
/**
*如果选择元素已打开，则返回true
*/
select FX . prototype . _ iso pen = function(opt){
return classie.has( this.selEl，‘cs-active ’);
}
/**
*从选项中删除焦点类
*/
select FX . prototype . _ remove focus = function(opt){
var focus El = this . selel . query selector(‘Li . cs-focus ’)
if( focusEl ) {
classie.remove( focusEl，‘cs-focus ’);
}
}
/**
*添加到全局名称空间
*/
窗户。SelectFx = SelectFx
})(窗口)；
