ボタンを押すと、selectタグ（選択リスト）を表示し選択した文字をボタンに表示する

ソース

<div class="mamListBox">
  <a href="javascript:void(0)">
    <div>選択してください</div>
  </a>
  <select size="8" data-role="none">
    <option value="1">HTML</option>
    <option value="2">CSS</option>
    <option value="3">Javascript</option>
    <option value="4">HTML+CSS</option>
    <option value="5">HTML+CSS+JavaScript</option>
    <option value="6">HTML+Javascript</option>
    <option value="7">Pascal</option>
    <option value="8">Basic</option>
    <option value="9">C++</option>
    <option value="10">Etc.</option>
  </select>
</div>

<style>
.mamListBox{
  width:160px;
  height:40px;
  vertical-align:middle;
  position:relative;
  padding:0;
  margin:0;
  z-index:100;
}
.mamListBox>a{
  display:block;
  text-decoration:none;
  vartical-align:middle;
  background:#FFF;
  color:#000;
  border:1px solid #CCC;
  box-shadow: 6px 6px 4px 0px rgba(0,0,0,0.4);
  height:100%;
  width:100%;
  border-radius:8px;
}
.mamListBox>a:active{
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.4) inset;
  padding-top:4px;
}
.mamListBox>a>div{
  padding:4px;
  display:inline-block;
  position:absolute;
  transform:translateY(-50%);
  top:50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  width:100%;
}
.mamListBox>select{
  position:absolute;
  margin:0;
  display:none;
  font-size:14pt;
  box-shadow: 6px 6px 4px 0px rgba(0,0,0,0.4);
  border-radius:4px;
  border:1px solid #CCC;
}
.mamListBox select:focus{outline: none;}
</style>
<script>
  var mamlistboxdiv;
  var mamlistboxa;
  var mamlistbox;
  var mamlistbox_active=false;
  window.addEventListener("load",function(){
    mamlistboxdiv=document.querySelector(".mamListBox>a>div");
    mamlistboxa=document.querySelector(".mamListBox>a");
    mamlistbox=document.querySelector(".mamListBox>select");
    mamlistboxa.addEventListener("click",function(event){
      if(mamlistbox_active==false){
        mamlistbox.style.display = "block";
        mamlistbox_active=true;
        mamlistbox.focus();
      }else{
        mamlistbox_active=false;
      }
    });
    mamlistbox.addEventListener("blur",function(){
      mamlistbox.style.display = "none";
    });
    mamlistbox.addEventListener("click",function(){
      mamlistboxdiv.innerHTML = mamlistbox.querySelectorAll('option')[mamlistbox.selectedIndex].innerHTML;
      mamlistbox_active=false;
      mamlistbox.blur();
    });
    document.documentElement.addEventListener("click",mamListboxOtherClick);
  });
  function mamListboxOtherClick(event){
    if(event.target==mamlistboxdiv){return;}
    if(event.target==mamlistboxa){return;}
    if(event.target==mamlistbox){return;}
    mamlistbox_active=false;
  }
</script>