2026, 새로운 도약을 시작합니다.

셀렉트값에 따라 변하는 2단 셀렉트박스

<ul>
    <li>
        <select name="BDIV" id="ctg" class="sel_cate" onchange="fnCngList(this.value);">
            <option value="">대분류</option>
            <option value="B1">분류1</option>
            <option value="B2">분류2</option>
            <option value="B3">분류3</option>
        </select>
    </li>
    <li>
        <select name="SDIV" id="ctg_nm" class="sel_list">
            <option value="">소분류</option>
        </select>
    </li>
</ul>


function fnCngList(sVal){
    var f = document.form1;
    var opt = $("#ctg_nm option").length;
 
    if(sVal == "") {
        num = new Array("소분류");
        vnum = new Array("");
    }else if(sVal == "B1") {
        num = new Array("분류1-1","분류1-2","분류1-3");
        vnum = new Array("1-1","1-2","1-3");
    }else if(sVal == "B2") {
        num = new Array("분류2-1","분류2-2","분류2-3");
        vnum = new Array("2-1","2-2","2-3");
    }else if(sVal == "B3") {
        num = new Array("분류3-1","분류3-2","분류3-3");
        vnum = new Array("3-1","3-2","3-3");
    }
 
    for(var i=0; i<opt; i++) {
        f.SDIV.options[0] = null;
    }
 
    for(k=0;k < num.length;k++) {
        f.SDIV.options[k] = new Option(num[k],vnum[k]);
    }
}
 

///해당 자바스크립트에서 값에 맞게 수정할수있습니다

|

댓글 6개

정말 좋은 팁입니다. 응용해서 사용해보겠습니다.
감사합니다.
좋은팁 감사합니다!
분류가 100개가 넘어가는데 분리해서는 사용 불가능한가요 ?
100개가되면 다 분류를 추가하셔야합니다
ajax를 사용하시는게 좋습니다.
위 예문을 쓰기에 적용할경우 wr_1 필드를 사용한다면 어디를 수정해줘야하죠?

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,598
2741 3일 전 조회 120
2740 5일 전 조회 107
2739 1주 전 조회 210
2738 1주 전 조회 218
2737 1주 전 조회 181
2736 1주 전 조회 280
2735 3주 전 조회 284
2734 3주 전 조회 263
2733 1개월 전 조회 265
2732 1개월 전 조회 301
2731 1개월 전 조회 268
2730 1개월 전 조회 227
2729 1개월 전 조회 357
2728 1개월 전 조회 245
2727 1개월 전 조회 422
2726 1개월 전 조회 256
2725 1개월 전 조회 332
2724 1개월 전 조회 361
2723 1개월 전 조회 267
2722 1개월 전 조회 300
2721 1개월 전 조회 212
2720 2개월 전 조회 304
2719 2개월 전 조회 307
2718 2개월 전 조회 202
2717 2개월 전 조회 337
2716 2개월 전 조회 202
2715 2개월 전 조회 312
2714 2개월 전 조회 273
2713 2개월 전 조회 376
2712 2개월 전 조회 289
🐛 버그신고