jQuery / Selector / :selected - select에서 선택된 option를 선택하는 선택자
:selected
는 select
에서 선택된 option
를 선택한다.
:selected
대신 :checked
를 사용해도 된다.
- 색을 선택하면 그 값을 div 요소의 배경색으로 만든다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; font-size: 20px; } div { margin: 30px 0px; padding : 30px 60px; border: 5px solid #dadada; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> <script> $( document ).ready( function() { $( 'select' ).change( function() { var backgroundColor = $( 'option:selected' ).val(); $( 'div' ).css( 'background-color', backgroundColor ); } ); } ); </script> </head> <body> <select> <option></option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="red">Red</option> </select> <div>Color</div> </body> </html>