select 에 동적 item 추가

js

var old_menu = '';
function menuclick(v) {
  if( old_menu != v ) {
    if( old_menu !='' ) {
      document.all('sb'+ old_menu).style.display = 'none';
    }
    document.all('s' + v).innerText='─';
    document.all('sb'+ v).style.display='block';
    old_menu = v;

  } else {
    document.all('s'+v).innerText='┼';
    document.all('sb'+v).style.display='none';

    old_menu = '';
  }
}

//셀렉트에 옵션항목을 추가
function ck(v1,v2){
  var aIdx=document.f.sel.options.length;
  var str=v2;
  var itm= new Option(str);
  document.f.sel.options[aIdx]=itm;
  document.f.sel.options[aIdx].value=v1;
}

//선택 옵션항목을 제거
function dl(sel){
  sel.options[sel.selectedIndex]=null;
}

css

.sb {
  display: none;
}

html

<form name="f">
  <select name="sel" multiple size=5 onchange=alert(this.value)>
    <option value='http://www.google.co.kr'>구글
  </select>
  <input type="button" onclick=dl(this.form.sel) value="제거">
</form>
<sup> <span id="s1">┼ </span> </sup>

<span onclick="menuclick(1);" class=mn>메일 </span>
<span id="sb1" class="sb">
  <a href=# onClick="ck('http://google.com','구글')">구글 </a> <br>
  <a href=# onClick="ck('http://www.naver.com','네이버')">네이버 </a>
</span>

<br>

<sup> <span id="s2">┼ </span> </sup>

<span onclick="menuclick(2);" class=mn>검색엔진 </span>
<span id="sb2" class="sb">
  <a href=# onClick="ck('http://google.com','구글')">구글 </a> <br>
  <a href=# onClick="ck('http://www.naver.com','네이버')">네이버 </a>
</span>

See the Pen 2중 레이어 by younghyeong ryu (@wangta69) on CodePen.