Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Archives
Today
Total
관리 메뉴

개발자 굿럭김의 블로그

다중 셀렉트박스 동적 생성 본문

Javascript

다중 셀렉트박스 동적 생성

개발자 굿럭김 2019. 5. 27. 14:56

qnaType.jsp

<script type="text/javascript">
$(function(){
    
    // 질문유형을 선택한다.
    chnQnaType('1' , '11');
});

function chnQnaType(type , select) {
    
    $('#schQnaType').empty();
    
    if(type == '1') { // 상품관련
        $('#schQnaType').append("<option value='11' >상품관련</option>'");
    } else if (type == '2') {  // 일반관련
        $('#schQnaType').append("<option value='21' >이용문의</option>'");
        $('#schQnaType').append("<option value='22' >회원가입/로그인</option>'");
        $('#schQnaType').append("<option value='23' >기타문의</option>'");
    } else if ( type == '3') {  // 주문관련
        $('#schQnaType').append("<option value='31' >결제문의</option>'");
        $('#schQnaType').append("<option value='32' >배송문의</option>'");
        $('#schQnaType').append("<option value='33' >주문취소문의</option>'");
        $('#schQnaType').append("<option value='34' >반품문의</option>'");
        $('#schQnaType').append("<option value='35' >기타문의</option>'");
    }
    document.getElementById("schQnaType").style.display = "";
    
    if ($.trim(select) != "") {
        $('#select1').val(type);
        $('#schQnaType').val(select);
    }
}


<tr>
    <th>질문유형</th>
	<td width="600px">
	    <select name="questType" id="select1" onChange="chnQnaType(this.value)" >
		    <option value="1">상품관련</option>
		    <option value="2">일반관련</option>
		    <option value="3">주문관련</option>
		</select>    
		<select id="schQnaType" name="schQnaType"   style="width:120px; display:none;" >
		</select>
	</td>
	<th>처리상황</th>
	<td>
	    <select name="stat" id="selectBox">
		    <option value="1" <c:if test="${sform.schStatus == '1'}">selected="selected"</c:if>>답변완료</option>
		    <option value="2" <c:if test="${sform.schStatus == '2'}">selected="selected"</c:if>>처리중</option>
		    <option value="3" <c:if test="${sform.schStatus == '3'}">selected="selected"</c:if>>대기</option>
		</select>
	</td>
</tr>

첫번째 셀렉트 박스 값이 1일때
첫번째 셀렉트 박스 값이 2일때
첫번째 셀렉트 박스 값이 3일때

'Javascript' 카테고리의 다른 글

datepicker 기간 버튼 만들기  (0) 2019.05.27
[팝업] 자식창의 값을 부모창으로 전달하기  (0) 2019.05.27