셀렉트박스 하위메뉴 링크 질문입니다
본문
검색을 통해서 2단셀렉트박스 소스는 구했는데요
하위메뉴(소스에서 병원안내, 인사말)를 선택했을 때 해당 페이지로 넘어가게 하고 싶습니다.
그리고 선택해서 넘어갔을 때 현재 보여지는 페이지 목록이 셀렉트박스에 보여지게 하고 싶은데 이것도 가능한건가요?
제가 스크립트는 문외한이라서 도와 주시면 감사하겠습니다!
<select name="selectA" id="selectA" onchange="ChangeSelectB(this);">
<option value="1" selected = "selected">병원안내</option>
<option value="2">진료안내</option>
<option value="3">관절센터</option>
<option value="4">척추센터</option>
<option value="5">스포츠재활센터</option>
<option value="6">내과/건강검진</option>
<option value="7">고객센터</option>
</select>
<select name="selectB" id="selectB">
<option value="A">병원안내</option>
<option value="B">인사말</option>
</select>
<!-- 2단 셀렉트 박스 -->
<script type="text/javascript">
var selectB1 = [
{"text":"병원안내","value":"A"},
{"text":"인사말","value":"B"}
];
var selectB2 = [
{"text":"테스트1","value":"A"},
{"text":"테스트2","value":"B"},
{"text":"테스트3","value":"C"}
];
// var selectB3 = [
//{"text":"중공업 A","value":"A"},
//{"text":"중공업 B","value":"B"}
// ];
//var selectB4 = [
// {"text":"인프라 A","value":"A"},
// {"text":"인프라 B","value":"B"},
// {"text":"인프라 C","value":"C"}
// ];
function ChangeSelectB(selectA)
{
var value = selectA.value;
var selectBArray = eval("selectB"+value);
// selectB 셀렉트 박스에 들어갈 변수를 가져올 수 있다.
// eval 은 변수이름으로 객체를 가져오는 용도로 사용.
try
{ // DOM 방식을 사용하여 selectB 셀렉트 박스 객체를 얻어온다.
// id를 사용해 가져오기 위해서 getElementById 메소드를 사용
var oSelectB = document.getElementById("selectB");
//selectB 셀렉트 박스의 하위 엘리멘트를 삭제한다.
while(0 < oSelectB.childNodes.length)
{
oSelectB.removeChild(oSelectB.firstChild);
}
var option = null;
// 새로운 option을 selectB 셀렉트 박스에 추가해 준다.
for (var index=0; index < selectBArray.length ;index++ )
{
option = document.createElement("option");
option.value = selectBArray[index].value;
// TextNode를 생성하여 option 객체의 하위 객체로 추가해 준다.
option.appendChild(document.createTextNode(selectBArray[index].text));
// selectB 셀렉트 박스에 option 객체를 추가한다.
oSelectB.appendChild(option);
}
}
catch (e)
{
alert(e.description);
}
}
</script>
<!-- 2단 셀렉트 박스 -->
답변을 작성하시기 전에 로그인 해주세요.
