Select박스 선택한 항목만 레이어로 출력

2010. 11. 6. 03:27웹/Html/Javascript/Css


<!--레이어출력 위치설정-->
<style>
#sub1, #sub2, #sub3, #sub4, #sub5
{ position: absolute;left: 280px;top: 350;visibility: hidden;z-index: 5}
</style>

<!--Selec박스t 선택 스크립트-->
<script>
<!--
catnumber = 5 // 카테고리의 갯수 설정 ;
offset = 150 ;
performOnchange = false ;
if (document.all) {
docObj = "document.all." ;
styleObj = ".style" ;
} else {
docObj = "document." ;
styleObj = "" ;
}
function openselect(subcat) {
popupselect = eval(docObj + subcat + styleObj) ;
popupselect.visibility = "visible" ;
}
function closeselect(submenu,subcat){
popupselect = eval(docObj + subcat + styleObj);
if (submenu.selectedIndex != 0) {
popupselect.visibility = "hidden" ;
numchoice = submenu.selectedIndex ;
choice = submenu[numchoice].value ;
submenu.selectedIndex = 0 ;
}
}
function lock() {
performOnchange = false ;
}
function unlock() {
performOnchange = true ;
}
function selectSub(cat) {
for (i=1; i <= catnumber; i++) { ;
subcat = "sub" + i ;
popupselect = eval(docObj + subcat + styleObj);
popupselect.visibility = "hidden" ;
}
if (performOnchange == true) {
letsopen = "sub" + cat.selectedIndex ;
if (letsopen == "sub0") {
alert("항목을 선택하세요."); <!--선택하세요를 선택하면 나타나는 경고창-->
} else {
openselect(letsopen);
lock() ;
}
}
}
-->
</script>

<!--Select 태그부분-->
<select size="1" name="select" onmouseover="unlock()" onkeyup="unlock()" onchange="selectSub(this)">
  <option selected>선택하세요</option>
  <option value="항목1값">항목1</option>
  <option value="항목2값">항목2</option>
  <option value="항목3값">항목3</option>
  <option value="항목4값">항목4</option>
  <option value="항목5값">항목5</option>
</select>

<!--레이어 부분-->
<span id="sub1">
1번 레이어
</span>
<span id="sub2">
2번 레이어
</span>
<span id="sub3">
3번 레이어
</span>
<span id="sub4">
4번 레이어
</span>
<span id="sub5">
5번 레이어
</span>




1번 레이어 2번 레이어 3번 레이어 4번 레이어 5번 레이어