select实现多选下拉框功能_excel下拉框实现复选

select实现多选下拉框功能_excel下拉框实现复选 各位朋友大家早上好！今天给大家带来的是 八种select下拉选择特效源码！在日常工作中会经常遇到！大家可以按照自己的意愿，做成喜欢的样子！有想要文件版源码的可以私聊小编！废话不多说，上源码！JS:/*** selectFx.js v1.0.0* http://www.codrops.com** Licensed under the MIT license.* http://www.opensource.org/licenses/mit-license.php** Copyright 2014, Codrops* http://www.codrops.com*/;( function( window ) {‘use strict’;/*** based on from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js*/function hasParent( e, p ) {if (!e) return false;var el = e.target||e.srcElement||e||false;while (el && el != p) {el = el.parentNode||false;}return (el!==false);};/*** extend obj function*/function extend( a, b ) {for( var key in b ) {if( b.hasOwnProperty( key ) ) {a[key] = b[key];}}return a;}/*** SelectFx function*/function SelectFx( el, options ) {this.el = el;this.options = extend( {}, this.options );extend( this.options, options );this._init();}/*** SelectFx options*/SelectFx.prototype.options = {// if true all the links will open in a new tab.// if we want to be redirected when we click an option, we need to define a data-link attr on the option of the native select elementnewTab : true,// when opening the select element, the default placeholder (if any) is shownstickyPlaceholder : true,// callback when changing the valueonChange : function( val ) { return false; }}/*** init function* initialize and cache some vars*/SelectFx.prototype._init = function() {// check if we are using a placeholder for the native select box// we assume the placeholder is disabled and selected by defaultvar selectedOpt = this.el.querySelector( ‘option[selected]’ );this.hasDefaultPlaceholder = selectedOpt && selectedOpt.disabled;// get selected option (either the first option with attr selected or just the first option)this.selectedOpt = selectedOpt || this.el.querySelector( ‘option’ );// create structurethis._createSelectEl();// all optionsthis.selOpts = [].slice.call( this.selEl.querySelectorAll( ‘li[data-option]’ ) );// total optionsthis.selOptsCount = this.selOpts.length;// current indexthis.current = this.selOpts.indexOf( this.selEl.querySelector( ‘li.cs-selected’ ) ) || -1;// placeholder elemthis.selPlaceholder = this.selEl.querySelector( ‘span.cs-placeholder’ );// init eventsthis._initEvents();}/*** creates the structure for the select element*/SelectFx.prototype._createSelectEl = function() {var self = this, options = ”, createOptionHTML = function(el) {var optclass = ”, classes = ”, link = ”;if( el.selectedOpt && !this.foundSelected && !this.hasDefaultPlaceholder ) {classes += ‘cs-selected ‘;this.foundSelected = true;}// extra classesif( el.getAttribute( ‘data-class’ ) ) {classes += el.getAttribute( ‘data-class’ );}// link optionsif( el.getAttribute( ‘data-link’ ) ) {link = ‘data-link=’ + el.getAttribute( ‘data-link’ );}if( classes !== ” ) {optclass = ‘class=”‘ + classes + ‘” ‘;}return ‘<li ‘ + optclass + link + ‘ data-option data-value=”‘ + el.value + ‘”><span>’ + el.textContent + ‘</span></li>’;};[].slice.call( this.el.children ).forEach( function(el) {if( el.disabled ) { return; }var tag = el.tagName.toLowerCase();if( tag === ‘option’ ) {options += createOptionHTML(el);}else if( tag === ‘optgroup’ ) {options += ‘<li class=”cs-optgroup”><span>’ + el.label + ‘</span><ul>’;[].slice.call( el.children ).forEach( function(opt) {options += createOptionHTML(opt);} )options += ‘</ul></li>’;}} );var opts_el = ‘<div class=”cs-options”><ul>’ + options + ‘</ul></div>’;this.selEl = document.createElement( ‘div’ );this.selEl.className = this.el.className;this.selEl.tabIndex = this.el.tabIndex;this.selEl.innerHTML = ‘<span class=”cs-placeholder”>’ + this.selectedOpt.textContent + ‘</span>’ + opts_el;this.el.parentNode.appendChild( this.selEl );this.selEl.appendChild( this.el );}/*** initialize the events*/SelectFx.prototype._initEvents = function() {var self = this;// open/close selectthis.selPlaceholder.addEventListener( ‘click’, function() {self._toggleSelect();} );// clicking the optionsthis.selOpts.forEach( function(opt, idx) {opt.addEventListener( ‘click’, function() {self.current = idx;self._changeOption();// close select elemself._toggleSelect();} );} );// close the select element if the target it´s not the select element or one of its descendants..document.addEventListener( ‘click’, function(ev) {var target = ev.target;if( self._isOpen() && target !== self.selEl && !hasParent( target, self.selEl ) ) {self._toggleSelect();}} );// keyboard navigation eventsthis.selEl.addEventListener( ‘keydown’, function( ev ) {var keyCode = ev.keyCode || ev.which;switch (keyCode) {// up keycase 38:ev.preventDefault();self._navigateOpts(‘prev’);break;// down keycase 40:ev.preventDefault();self._navigateOpts(‘next’);break;// space keycase 32:ev.preventDefault();if( self._isOpen() && typeof self.preSelCurrent != ‘undefined’ && self.preSelCurrent !== -1 ) {self._changeOption();}self._toggleSelect();break;// enter keycase 13:ev.preventDefault();if( self._isOpen() && typeof self.preSelCurrent != ‘undefined’ && self.preSelCurrent !== -1 ) {self._changeOption();self._toggleSelect();}break;// esc keycase 27:ev.preventDefault();if( self._isOpen() ) {self._toggleSelect();}break;}} );}/*** navigate with up/dpwn keys*/SelectFx.prototype._navigateOpts = function(dir) {if( !this._isOpen() ) {this._toggleSelect();}var tmpcurrent = typeof this.preSelCurrent != ‘undefined’ && this.preSelCurrent !== -1 ? this.preSelCurrent : this.current;if( dir === ‘prev’ && tmpcurrent > 0 || dir === ‘next’ && tmpcurrent < this.selOptsCount – 1 ) {// save pre selected current – if we click on option, or press enter, or press space this is going to be the index of the current optionthis.preSelCurrent = dir === ‘next’ ? tmpcurrent + 1 : tmpcurrent – 1;// remove focus class if any..this._removeFocus();// add class focus – track which option we are navigatingclassie.add( this.selOpts[this.preSelCurrent], ‘cs-focus’ );}}/*** open/close select* when opened show the default placeholder if any*/SelectFx.prototype._toggleSelect = function() {// remove focus class if any..this._removeFocus();if( this._isOpen() ) {if( this.current !== -1 ) {// update placeholder textthis.selPlaceholder.textContent = this.selOpts[ this.current ].textContent;}classie.remove( this.selEl, ‘cs-active’ );}else {if( this.hasDefaultPlaceholder && this.options.stickyPlaceholder ) {// everytime we open we wanna see the default placeholder textthis.selPlaceholder.textContent = this.selectedOpt.textContent;}classie.add( this.selEl, ‘cs-active’ );}}/*** change option – the new value is set*/SelectFx.prototype._changeOption = function() {// if pre selected current (if we navigate with the keyboard)…if( typeof this.preSelCurrent != ‘undefined’ && this.preSelCurrent !== -1 ) {this.current = this.preSelCurrent;this.preSelCurrent = -1;}// current optionvar opt = this.selOpts[ this.current ];// update current selected valuethis.selPlaceholder.textContent = opt.textContent;// change native select element´s valuethis.el.value = opt.getAttribute( ‘data-value’ );// remove class cs-selected from old selected option and add it to current selected optionvar oldOpt = this.selEl.querySelector( ‘li.cs-selected’ );if( oldOpt ) {classie.remove( oldOpt, ‘cs-selected’ );}classie.add( opt, ‘cs-selected’ );// if there´s a link definedif( opt.getAttribute( ‘data-link’ ) ) {// open in new tab?if( this.options.newTab ) {window.open( opt.getAttribute( ‘data-link’ ), ‘_blank’ );}else {window.location = opt.getAttribute( ‘data-link’ );}}// callbackthis.options.onChange( this.el.value );}/*** returns true if select element is opened*/SelectFx.prototype._isOpen = function(opt) {return classie.has( this.selEl, ‘cs-active’ );}/*** removes the focus class from the option*/SelectFx.prototype._removeFocus = function(opt) {var focusEl = this.selEl.querySelector( ‘li.cs-focus’ )if( focusEl ) {classie.remove( focusEl, ‘cs-focus’ );}}/*** add to global namespace*/window.SelectFx = SelectFx;} )( window );