Question

我有以下选择选项：

<select class="items" id="items" name="option">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

使用以下JS：

var numOfItems;
var total = 75;

$('.items').on('change', function() {
  var get = $('#items option:selected').val();
  alert(get);

  if (get === '1') {
    numOfItems = 50; // random values
  } else if (get === '2') {
    numOfItems = 10;
  } else if (get === "3") {
    numOfItems = 20;
  }

  $('#new_text').html(total + numOfItems + " USD");
});

现在它正常运行并显示用户从变化选项中选择所需的内容，但是，一旦我开始设置选择样式，它基本上就会停止运行。我昨天花了一整天（基本上），并且无法弄清楚发生了什么。

这就是我设计它（微小的变化）：

<div class="col-xs-12 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2">
   <label class="select-label">Number of items (max 3):</label>
   <select class="items cs-select cs-skin-rotate" id="items" name="option">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
</div>

结果如下：

任何帮助表示赞赏！这是我的另一半代码（HTML），如果您需要查看链接的CSS文件，我很乐意发布它们：

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-rotate.css" />

这是我试图更新的部分：

<h2 style="margin-top: 40px;">Total amount $<span id="new_text">35 USD</span></h2>

更新**

CS-select.css：

/* Default custom select styles */
div.cs-select {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: left;
    background: #fff;
    z-index: 100;
    width: 100%;
    max-width: 500px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.cs-select:focus {
    outline: none; /* For better accessibility add a style for this in your skin */
}

.cs-select select {
    display: none;
}

.cs-select span {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Placeholder and selected option */
.cs-select > span {
    padding-right: 3em;
}

.cs-select > span::after,
.cs-select .cs-selected span::after {
    speak: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cs-select > span::after {
    content: '\25BE';
    right: 1em;
}

.cs-select .cs-selected span::after {
    content: '\2713';
    margin-left: 1em;
}

.cs-select.cs-active > span::after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

div.cs-active {
    z-index: 200;
}

/* Options */
.cs-select .cs-options {
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: #fff;
    visibility: hidden;
}

.cs-select.cs-active .cs-options {
    visibility: visible;
}

.cs-select ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.cs-select ul span {
    padding: 1em;
}

.cs-select ul li.cs-focus span {
    background-color: #ddd;
}

/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
    padding-left: 1em;
}

.cs-select li.cs-optgroup > span {
    cursor: default;
}

CS-皮肤rotate.css：

div.cs-skin-rotate {
    background: transparent;
    font-size: 1.5em;
    font-weight: 700;
    width: 300px;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

@media screen and (max-width: 30em) {
    div.cs-skin-rotate { font-size: 1em; width: 200px; }
}

.cs-skin-rotate > span,
.cs-skin-rotate .cs-options li {
    background: transparent;
    -webkit-transform-origin: 50% 50% -200px;
    transform-origin: 50% 50% -200px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}

@media screen and (max-width: 30em) {
    .cs-skin-rotate > span,
    .cs-skin-rotate .cs-options li {
        -webkit-transform-origin: 50% 50% -100px;
        transform-origin: 50% 50% -100px;
    }
}

.cs-skin-rotate > span {
    border: 1px dashed #c0c6c4;
}

.cs-skin-rotate.cs-active > span {
    opacity: 0;
    -webkit-transform: rotate3d(0,1,0,-90deg);
    transform: rotate3d(0,1,0,-90deg);
}

.cs-skin-rotate > span::after,
.cs-skin-rotate .cs-selected span::after {
    font-family: 'icomoon';
}

.cs-skin-rotate > span::after,
.cs-skin-rotate.cs-active > span::after {
    content: '\e012';
    -webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,-90deg);
    transform: translate3d(0,-50%,0) rotate3d(0,0,1,-90deg);
}

.cs-skin-rotate ul span::after {
    content: '';
    opacity: 0;
}

.cs-skin-rotate .cs-selected span::after {
    content: '\e00e';
    font-size: 1.5em;
    opacity: 0.5;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.cs-skin-rotate .cs-options {
    background: transparent;
    top: 0;
    overflow: visible;
    visibility: visible;
    pointer-events: none;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.cs-skin-rotate .cs-options ul {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.cs-skin-rotate .cs-options li {
    opacity: 0;
    -webkit-transform: rotate3d(0,1,0,90deg);
    transform: rotate3d(0,1,0,90deg);
}

.cs-skin-rotate.cs-active .cs-options li {
    opacity: 1;
    -webkit-transform: rotate3d(0,1,0,0deg);
    transform: rotate3d(0,1,0,0deg);
    pointer-events: auto;
}

.cs-skin-rotate .cs-options li:nth-child(2) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.cs-skin-rotate .cs-options li:nth-child(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.cs-skin-rotate .cs-options li:nth-child(4) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.cs-skin-rotate .cs-options li:nth-child(5) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.cs-skin-rotate.cs-active .cs-options ul li {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.cs-skin-rotate .cs-options li span {
    padding: 1em 0;
}

.cs-skin-rotate .cs-options li span:hover,
.cs-skin-rotate .cs-options li.cs-focus span,
.cs-skin-rotate .cs-selected span {
    opacity: 0.8;
    background: transparent;
}

selectFx.js：

;( 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 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; }
    }

    /**
     * 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 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.selectedOpt = selectedOpt || this.el.querySelector( 'option' );

        // create structure
        this._createSelectEl();

        // all options
        this.selOpts = [].slice.call( this.selEl.querySelectorAll( 'li[data-option]' ) );

        // total options
        this.selOptsCount = this.selOpts.length;

        // current index
        this.current = this.selOpts.indexOf( this.selEl.querySelector( 'li.cs-selected' ) ) || -1;

        // placeholder elem
        this.selPlaceholder = this.selEl.querySelector( 'span.cs-placeholder' );

        // init events
        this._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 classes
            if( el.getAttribute( 'data-class' ) ) {
                classes += el.getAttribute( 'data-class' );
            }
            // link options
            if( 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 select
        this.selPlaceholder.addEventListener( 'click', function() {
            self._toggleSelect();
        } );

        // clicking the options
        this.selOpts.forEach( function(opt, idx) {
            opt.addEventListener( 'click', function() {
                self.current = idx;
                self._changeOption();
                // close select elem
                self._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 events
        this.selEl.addEventListener( 'keydown', function( ev ) {
            var keyCode = ev.keyCode || ev.which;

            switch (keyCode) {
                // up key
                case 38:
                    ev.preventDefault();
                    self._navigateOpts('prev');
                    break;
                // down key
                case 40:
                    ev.preventDefault();
                    self._navigateOpts('next');
                    break;
                // space key
                case 32:
                    ev.preventDefault();
                    if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
                        self._changeOption();
                    }
                    self._toggleSelect();
                    break;
                // enter key
                case 13:
                    ev.preventDefault();
                    if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
                        self._changeOption();
                        self._toggleSelect();
                    }
                    break;
                // esc key
                case 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 option
            this.preSelCurrent = dir === 'next' ? tmpcurrent + 1 : tmpcurrent - 1;
            // remove focus class if any..
            this._removeFocus();
            // add class focus - track which option we are navigating
            classie.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 text
                this.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 text
                this.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 option
        var opt = this.selOpts[ this.current ];

        // update current selected value
        this.selPlaceholder.textContent = opt.textContent;

        // change native select element´s value
        this.el.value = opt.getAttribute( 'data-value' );

        // remove class cs-selected from old selected option and add it to current selected option
        var oldOpt = this.selEl.querySelector( 'li.cs-selected' );
        if( oldOpt ) {
            classie.remove( oldOpt, 'cs-selected' );
        }
        classie.add( opt, 'cs-selected' );

        // if there´s a link defined
        if( 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' );
            }
        }

        // callback
        this.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 );

最后， classie.js ：

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

Answer 1

基于您使用的选择类。一个简单的谷歌搜索给了这个SelectInspiration，正如我的同行在评论中指出的，这个插件改变了选择小部件的外观（我应该添加一个好的）。

不用担心，开发者已经使插件可以自定义。根据演示文件，可以捕获更改事件并使用所需的更改覆盖它。

我认为HTML中有类似的内容

document.querySelectorAll('select.cs-select')).forEach(function (el) {
            new SelectFx(el);
 }

现在，如果我们深入了解开发包含的自定义js文件。你可以看到

`

  /**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 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; }
    }`

牢记这一点，你可以

function changelogic(val) {
            console.log("Your logic")
            console.log(val);
        }

        document.querySelectorAll('select.cs-select')).forEach(function (el) {
            new SelectFx(el, {onChange: changelogic});
        };

这样可以让你舒服起来而不需要改变太多

用户选择选项不使用jQuery更新

1 个答案: