26.jQuery - 선택값 가져오기 ( 02.Selectors - 04.Selected )
dropdownlist에서 선택된 값을 가져오고 싶다면 :selected 라는 코드를 쓰면 유용
$("#dropdown리스트아이디 option:selected").text();
$("option:selected").text();
$(":selected").text();
원래는 맨 윗줄처럼 정확하게 타겟을 지정해준후 :selected를 쓰는게 정석입니다.
하지만 선택과 관련된 컨트롤이 이 페이지에 하나밖에 없다면 단순히
[ :selected ] 만 써도됩니다.
| 04.Selected.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>드롭다운리스트 선택한 값 가져오기</title> <script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { // 콤보박스가 변경될 때 이벤트 발생 $('#lstFavorites').change(function() { // 드롭다운리스트에서 선택된 값을 텍스트박스에 출력 var selectedText = // $("#lstFavorites option:selected").text(); // $("option:selected").text(); $(":selected").text(); $('#txtFavorite').val(selectedText); }); }); </script> </head> <body> <select id="lstFavorites"> <option>C#</option> <option>ASP.NET</option> <option>Silverlight</option> </select><hr /> <input type="text" id="txtFavorite" /> </body> </html> |
| 결과화면 |
[그림26-1] |
04.Selected.htm