title: User select option not updating with jQuery
body: <p>I have the following select option: </p>
  
  <pre><code>&lt;select class="items" id="items" name="option"&gt;
     &lt;option value="1"&gt;1&lt;/option&gt;
     &lt;option value="2"&gt;2&lt;/option&gt;
     &lt;option value="3"&gt;3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>With the following JS: </p>
  
  <pre><code>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");
  });
  </code></pre>
  
  <p>Now it functions correctly and displays what it needs to as the user selects from the varying options, however, once I start to style the select, it essentially stops functioning. I spent all day on this (basically) yesterday and can't figure out what's going on. </p>
  
  <p>This is what I'm styling it to (slight change): </p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2"&gt;
     &lt;label class="select-label"&gt;Number of items (max 3):&lt;/label&gt;
     &lt;select class="items cs-select cs-skin-rotate" id="items" name="option"&gt;
        &lt;option value="1"&gt;1&lt;/option&gt;
        &lt;option value="2"&gt;2&lt;/option&gt;
        &lt;option value="3"&gt;3&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which results in the following: </p>
  
  <p><a href="https://i.stack.imgur.com/4OrVw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4OrVw.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><a href="https://i.stack.imgur.com/v62k6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v62k6.png" alt="enter image description here"></a></p>
  
  <p>Any help is appreciated! Here's the other half of my code (HTML) and if you need to see the linked CSS files, I'll gladly post them: </p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="css/normalize.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/demo.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/cs-select.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/cs-skin-rotate.css" /&gt;
  </code></pre>
  
  <p>This is the portion I'm trying to update: </p>
  
  <pre><code>&lt;h2 style="margin-top: 40px;"&gt;Total amount $&lt;span id="new_text"&gt;35 USD&lt;/span&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>Update**</p>
  
  <p><strong>cs-select.css:</strong></p>
  
  <pre><code>/* 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 &gt; span {
      padding-right: 3em;
  }
  
  .cs-select &gt; 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 &gt; span::after {
      content: '\25BE';
      right: 1em;
  }
  
  .cs-select .cs-selected span::after {
      content: '\2713';
      margin-left: 1em;
  }
  
  .cs-select.cs-active &gt; 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 &gt; span {
      cursor: default;
  }
  </code></pre>
  
  <p><strong>cs-skin-rotate.css:</strong></p>
  
  <pre><code>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 &gt; 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 &gt; span,
      .cs-skin-rotate .cs-options li {
          -webkit-transform-origin: 50% 50% -100px;
          transform-origin: 50% 50% -100px;
      }
  }
  
  .cs-skin-rotate &gt; span {
      border: 1px dashed #c0c6c4;
  }
  
  .cs-skin-rotate.cs-active &gt; span {
      opacity: 0;
      -webkit-transform: rotate3d(0,1,0,-90deg);
      transform: rotate3d(0,1,0,-90deg);
  }
  
  .cs-skin-rotate &gt; span::after,
  .cs-skin-rotate .cs-selected span::after {
      font-family: 'icomoon';
  }
  
  .cs-skin-rotate &gt; span::after,
  .cs-skin-rotate.cs-active &gt; 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;
  }
  </code></pre>
  
  <p><strong>selectFx.js:</strong> </p>
  
  <pre><code>;( 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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; !this.foundSelected &amp;&amp; !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 '&lt;li ' + optclass + link + ' data-option data-value="' + el.value + '"&gt;&lt;span&gt;' + el.textContent + '&lt;/span&gt;&lt;/li&gt;';
          };
  
          [].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 += '&lt;li class="cs-optgroup"&gt;&lt;span&gt;' + el.label + '&lt;/span&gt;&lt;ul&gt;';
                  [].slice.call( el.children ).forEach( function(opt) {
                      options += createOptionHTML(opt);
                  } );
                  options += '&lt;/ul&gt;&lt;/li&gt;';
              }
          } );
  
          var opts_el = '&lt;div class="cs-options"&gt;&lt;ul&gt;' + options + '&lt;/ul&gt;&lt;/div&gt;';
          this.selEl = document.createElement( 'div' );
          this.selEl.className = this.el.className;
          this.selEl.tabIndex = this.el.tabIndex;
          this.selEl.innerHTML = '&lt;span class="cs-placeholder"&gt;' + this.selectedOpt.textContent + '&lt;/span&gt;' + 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() &amp;&amp; target !== self.selEl &amp;&amp; !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() &amp;&amp; typeof self.preSelCurrent != 'undefined' &amp;&amp; self.preSelCurrent !== -1 ) {
                          self._changeOption();
                      }
                      self._toggleSelect();
                      break;
                  // enter key
                  case 13:
                      ev.preventDefault();
                      if( self._isOpen() &amp;&amp; typeof self.preSelCurrent != 'undefined' &amp;&amp; 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' &amp;&amp; this.preSelCurrent !== -1 ? this.preSelCurrent : this.current;
  
          if( dir === 'prev' &amp;&amp; tmpcurrent &gt; 0 || dir === 'next' &amp;&amp; tmpcurrent &lt; 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 &amp;&amp; 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' &amp;&amp; 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 );
  </code></pre>
  
  <p>And lastly, <strong>classie.js</strong>: </p>
  
  <pre><code>( 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' &amp;&amp; define.amd ) {
    // AMD
    define( classie );
  } else {
    // browser global
    window.classie = classie;
  }
  
  })( window );
  </code></pre>