【メモ】JQueryを使わず独自UIでSELECTタグを制御する

デザイン的にSELECTタグだとどうしようもない時があるよねえ・・・。

sample.haml

  %ul#js-langList
    %li{class: ''} EN
    %li{class: ''} JA
    %li{class: ''} ZH
    %li{class: ''} FR
  %select#js-langSelector
    %option{value: 'en'} EN
    %option{value: 'ja'} JA
    %option{value: 'zh'} ZH
    %option{value: 'fr'} FR

sample.js

  document.getElementById('js-langList').addEventListener('click', function(e){
    document.getElementById('js-langSelector').options[Array.prototype.indexOf.call(e.target.parentNode.querySelectorAll("li"), e.target)].selected = true;
  }, false);

js-langSelectorはdisplay:noneして、あとは好きにスタイルを当てて下さいまし。

追記

UIの選択要素にCLASS(active)を付与する版

sample2.js

  document.getElementById('js-langList').addEventListener('click', function(e){
    var lists =  e.target.parentNode.children;
    for(var i = 0; i < lists.length; i++){
      lists[i].classList.remove('active');
    }
    e.target.classList.add('active');
    document.getElementById('js-langSelector').options[Array.prototype.indexOf.call(e.target.parentNode.querySelectorAll("li"), e.target)].selected = true;
  }, false);