jquery selectbox 예제

mirinae.maru 0 Comments

■ 예제 파일

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectbox test</title>
<script type="text/javascript" src="./js/jquery-1.12.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    $("#month").change(function() {

    });
});
</script>
</head>

<body>
<select id="month" name="month">
    <option value="">select</option>
    <option value="1">1 월</option>
    <option value="2">2 월</option>
    <option value="3">3 월</option>
    <option value="4">4 월</option>
    <option value="5">5 월</option>
</select>
</body>
</html>

 

■ 선택된 값 확인 – selectbox값이 변경되면 jquery ready > change 함수에서 확인 가능하다.

$(document).ready(function() {
    $("#month").change(function() {
        console.log( "선택된 값1 : " + $("#month").val() );
        console.log( "선택된 값2 : " + $("select[id=month]").val() );
    });
});

 

■ id가 month인 selectbox에서 값이 3인 option을 선택

$("#month").val(3);

 

■ 선택된 값의 text( label )

$("select[id=month] option:selected").text();

 

■ selectbox 초기화 – option 태그를 전부 지우고 값이 없는 option으로 초기화.

$("select[id='month']").html('<option value="">select</option>');

 

■ selectbox 초기화하고 새로운 option 추가 – html(), append()함수

$("select[id='month']").html('<option value="">select</option>');
$("select[id='month']").append('<option value="1">1일</option>');
$("select[id='month']").append('<option value="2">2일</option>');

 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다