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.