jquery selectbox 제어 ( 중요 )

jquery selectbox 제어

스크립트를 주석 처리했다 지웠다 하면서 확인해 보세요.

//--------------------------------------------------------------------------------------------------------------------------------------

// 문서가 준비되면

$(document).ready(function(){

// 셀렉트 박스에 옵션 추가하기.

$('#select2').append("<option value='1'>apple1</option>");  // 이후 추가하기

$('#select2').prepend("<option value='2'>apple2</option>"); // 이전 추가하기

// 선택된 option 값

$('#select1 option:selected').val(); 

// 선택된 option 텍스트

$('#select1 option:selected').text(); 

// 선택된 option 순서

$('#select1 option:selected').index();

// 선택된 option   바꾸기

$('#select1 option:eq(0)').replaceWith("<option value='1'>apple1</option>");

// 선택된 option을  selected

$('#select2 option:eq(1)').attr("selected", "selected");

// 선택된 val로  selected

$('#select1').val("1");

// 선택된 option 번호  삭제

$('#select1 option:eq(2)').remove();

// 선택된 option 첫번째, 마지막 삭제

$('#select1 option:first').remove();

$('#select1 option:last').remove();

$('#select1').append("<option value='1'>apple1</option>");  // 이후 추가하기

$('#select1').prepend("<option value='2'>apple2</option>"); // 이전 추가하기

// option 갯수

console.log( $('#select1 option').length );

// onchange 추가.

$('#select1').change(function(){

console.log( $(this).val() );

});

});

  

<!-- 기본적인 selectbox -->

<select id="select1" >

<option value="1">번호1</option>

<option value="2" selected>번호2</option>

<option value="3">번호3</option>

</select>

<br />

<!-- jquery로 add selectbox -->

<select id="select2"></select>

<br/>

 

//--------------------------------------------------------------------------------------------------------------------------------------

jquery selectbox 제어 끝 ~ !!