html下拉选中状态,前端必备 八种select下拉选择特效源码

效果图

各位朋友大家早上好！

今天给大家带来的是 八种select下拉选择特效源码！

在日常工作中会经常遇到！

大家可以按照自己的意愿，做成喜欢的样子！

需要文档版本源码，可以加我的HTML5前端交流群111645711

废话不多说，上源码！

;( function( window ) {

'use strict';

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);

};

function extend( a, b ) {

for( var key in b ) {

if( b.hasOwnProperty( key ) ) {

a[key] = b[key];

}

}

return a;

}

function SelectFx( el, options ) {

this.el = el;

this.options = extend( {}, this.options );

extend( this.options, options );

this._init();

}

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

element

newTab : true,

// when opening the select element, the default placeholder (if

any) is shown

stickyPlaceholder : true,

// callback when changing the value

onChange : function( val ) { return false; }

}

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

default

var 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.