由於javascript功能，重定向不起作用

Question

在我的項目中，我使用dropdown menu根據選擇重定向到不同的地方。這是我的代碼。

<div class="dropdown"> 
    <div class="color-4"> 
     <div class="container"> 
      <section> 
       <label class="select-label">Duration</label> 
       <select onchange="window.location.href=this.value" class="cs-select cs-skin-slide"> 
        <option value="http://127.0.0.1:9763/Kampana-Web/chart/acceleration/24" data-class="icon-camera">24 Hours</option> 
        <option value="http://127.0.0.1:9763/Kampana-Web/chart/acceleration/7" data-class="icon-camera">Last week</option> 
        <option value="http://127.0.0.1:9763/Kampana-Web/chart/acceleration/30" data-class="icon-camera">Last Month</option> 
        <option value="http://127.0.0.1:9763/Kampana-Web/chart/acceleration/90" data-class="icon-camera">Last 3 Months</option> 

       </select> 
      </section> 
     </div> 
    </div> 
</div> 

     <script> 
      (function() { 
        [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {  
         new SelectFx(el); 
        }); 
       })(); 
     </script> 

問題是，重定向不能使用這個javascript函數。該功能必須需要一個來維護dropdown menu中的功能和所有css支持。 如何使用此javascript函數啓用重定向？

這裏是SelectFx代碼

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

Answer 1

如你已標記爲jQuery這個問題可以簡化您的現有代碼如下：上SelectFx

$(function() { // Shortcut for $(document).ready(){...} 
    $('select.cs-select').each(function() { 
     new SelectFx(this); 
    }); 
}); 

如果沒有信息，我還怕」 t讓你成爲一個工作的例子，但希望這會有所幫助