<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('select').on('change', function(){
str = "";
$.each($('option:selected', this), function(){
str += $(this).val() + "<br>";
})
$('#result1 div').html(str);
})
})
</script>
<style>
select{
width : 200px;
height : auto;
font-size : 1.3em;
}
</style>
</head>
<body>
<div class = "box">
select에 change이벤트를 설정 <br>
option의 선택한 항목의 값을 script에서 처리 - value - val() <br>
$.each($('select option:selected'), function(){ })
$.each($('option:selected', this), function(){ })
<br>
<button type = "button" onclick="proc1()">확인</button>
<div id = "result1">
<form>
봄소식 : <br>
<select name="spring" id="spring" multiple size="6">
<option selected>개나리</option>
<option>진달래</option>
<option>민들레</option>
<option>벚꽃</option>
<option selected>목련</option>
<option>철쭉</option>
</select>
</form>
<div></div>
</div>
</div>
</body>
</html>
