▶ 대분류 > 중분류 > JQUERY

<%

request.setCharacterEncoding("utf-8");

String s1 = request.getParameter("select1");

String s2 = request.getParameter("select2");

%>

대분류 : <%=s1 %><br>

중분류 : <%=s2 %><br>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<form method="post">

<select id="select1" name="select1" onchange="itemChange(this.value)">

<option value="">=대분류 선택=</option>

<option value="색상">색상</option>

<option value="음식">음식</option>

</select>

<select id="select2" name="select2">

<option>=대분류 선택하세요=</option>

</select>

<button>확인</button>

</form>

<script>

function itemChange(str){

var color = ["검정","빨강","노랑"];

var food = ["짜장면","짬뽕","삼선짜장","볶음밥"];

var changeItem;

if(str == "색상"){

changeItem = color;

}else if(str == "음식"){

changeItem = food;

}

$('#select2 option').remove(); //중분류 내용 삭제

$('#select2').append("<option value=''>=중분류=</option>"); //추가

for(var count=0; count<changeItem.length; count++){

var option = $("<option value='"+changeItem[count]+"'>"+changeItem[count]+"</option>");

$('#select2').append(option); //내용 추가

}

}

</script>