3단 동적 셀렉트(selectbox)
페이지 정보
작성자 소율아범 댓글 0건 조회 2,478회 작성일 17-12-19 15:48본문
javascript를 활용하여 3단 셀렉트 박스 만들기
가끔 활용 할 경우가 생기는데
Javascript
function onLoad() {
initCombo(cbo_a);
}
function initCombo(pcbo, psParentCode) {
var ar = getComboData(pcbo.name, psParentCode);
pcbo.options.length = 0;
pcbo.options.add(new Option("선택", "0"));
pcbo.options[0].setAttribute("KEY","0");
for (var i = 0; i < ar.length; i++) {
pcbo.options.add(new Option(ar[i][1], ar[i][2]));
pcbo.options[i+1].setAttribute("KEY", ar[i][0]);
}
//alert(pcbo.outerHTML);
if (pcbo.onchange) pcbo.onchange();
}
function getComboData(psCboName, psParentCode) {
var ar_a = [
["3","코드0","3"],
["34","프로1","34"],
["35","프로2","35"],
["36","프로3","36"]
];
var ar_b = [
["341","프로1차1","1"],
["342","프로1차2","2"],
["351","프로2차1","1"],
["352","프로2차2","2"],
["353","프로2차3","3"],
["361","프로3차1","1"],
["362","프로3차2","2"],
["363","프로3차3","3"]
];
var ar_c = [
["341","프로1차1a","a"],
["341","프로1차1b","b"],
["341","프로1차1c","c"],
["351","프로2차1a","aa"],
["351","프로2차1b","bb"],
["361","프로3차1a","aaa"],
["361","프로3차1b","bbb"],
["361","프로3차1c","ccc"],
["361","프로3차1d","ddd"],
["361","프로3차1f","fff"]
];
var results = [];
var ar = psCboName == "cbo_a" ? ar_a :
psCboName == "cbo_b" ? ar_b :
psCboName == "cbo_c" ? ar_c : [];
var psParentLeng = new String(psParentCode).length;
for (var i = 0; i < ar.length; i++) {
// if (!psParentCode || ar[i][0].indexOf( psParentCode ) == 0) {
// results.push(ar[i]);
// }
if( psParentCode != undefined ){
if(psCboName == "cbo_b"){
var key = ar[i][0].substring(0, ar[i][0].length-1);
if ( key == psParentCode ) {
results.push(ar[i]);
}
}else if(psCboName == "cbo_c"){
if ( ar[i][0] == psParentCode ) {
results.push(ar[i]);
}
}
}else if(psParentCode == undefined){
if (!psParentCode || ar[i][0].indexOf( psParentCode ) == 0) {
results.push(ar[i]);
}
}
}
return results;
}
function onChange(pcbo) {
var cboTarget = pcbo.name == "cbo_a" ? cbo_b :
pcbo.name == "cbo_b" ? cbo_c : null;
if (!cboTarget) return;
// initCombo(cboTarget, pcbo.value);
initCombo(cboTarget, pcbo.options[pcbo.selectedIndex].KEY);
// cboTarget.style.display = cboTarget.length > 1 ? "" : "none";
}
HTML
<body onload=onLoad()> <select id=cbo_a name=cbo_a onchange=onChange(this)></select> <select id=cbo_b name=cbo_b onchange=onChange(this)></select> <select id=cbo_c name=cbo_c></select> </body>
댓글목록
등록된 댓글이 없습니다.