본문 바로가기

web/jQuery

jQuery val()

오! 이걸 원했음.ㅋ 선택한 엘리먼트의 값을 가져오는 함수 val()




<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript">
    
     $(function()
  {
  testVal();
  });
  
  function testVal(){
$("#messageval").text($('select#val option:selected').val());
}
    </script>
</head>
<body>

<select id="val" onchange=testVal();>
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
     <option value="3">3</option>
      <option value="4">4</option>
       <option value="5">5</option>
        <option value="6">6</option>
</select>
<div id="messageval"></div>
</body>
</html>





셀렉트를 선택 할때마다 밑의div 에 값을 출력하도록 하였다.
$('select#val option:selected').val() 에서 보는바와 같이 select 의 id 가 val 인 엘레먼트의 selected 된 값을 val()을 통해 가져온것을 text로 뿌려주는 것! javascript로 하면 몇줄 쓸텐데...좋긴 좋타+_+

'web > jQuery' 카테고리의 다른 글

jQuery after() prepend()  (0) 2011.01.11
jQuery click()  (0) 2011.01.10
jQuery val() 두번째  (0) 2011.01.09
jQuery prev() next()  (2) 2011.01.07
jQuery insertAfter()  (0) 2011.01.06