상태필터_selected

조수경·2021년 11월 24일
0

HTML

목록 보기
80/96
<!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(){
	// str = "";
	 $('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>

profile
신입 개발자 입니다!!!

0개의 댓글