Select Box jQuery

NO. 01  HTML 구조

 

<select id="selectBox" name="selectBox">            <option value=""></option>            <option value="first">first</option>            <option value=" second">second</option>            <option value=" third">third</option> </select>

 

 

NO. 02  jQuery로 선택된 값 읽기

 

// 선택된 옵션의 text 구하기 jQuery("#selectBox option:selected").text();   // 선택된 옵션의 value 구하기 jQuery("#selectBox option:selected").val(); jQuery("select[name=selectBox]").val();   // 선택된 옵션 index 구하기 jQuery("#selectBox option").index(jQuery("#selectBox option:selected"));

 

 

NO. 03  option 값 추가

 

// 마지막에 option 추가 jQuery("#selectBox").append("<option value='1'>Apples</option>"); jQuery("#selectBox").append("<option value='2'>After Apples</option>");   // 처음에 option 추가 jQuery("#selectBox").prepend("<option value='0'>Before Apples</option>"); ​ // 모든 option 변경 jQuery("#selectBox").html("<option value='1'>apple</option><option value='2'>Oranges</option>");​   // 특정 위치에 option 변경 jQuery("#selectBox option:eq(1)").replaceWith("<option value='2'>Some apples</option>"); jQuery("#selectBox option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");   // Insert an item in after a particular position jQuery("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");   // Insert an item in before a particular position jQuery("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

 

 

NO. 04  option 선택하기

 

// 지정된 index 값으로 select 하기 jQuery("#selectBox option:eq(2)").attr("selected", "selected"); ​jQuery("#selectBox option:eq(2)").attr("selected", true); ​ // text 값으로 select 하기 jQuery("#selectBox").val("Some oranges").attr("selected", "selected"); ​ // value 값으로 select 하기 jQuery("#selectBox").val("2");

 

 

NO. 05  option 삭제

 

// 지정된 인덱스 값의 item 삭제 jQuery("#selectBox option:eq(0)").remove();   // 첫번째 item 삭제 jQuery("#selectBox option:first").remove();   // 마지막 item 삭제 jQuery("#selectBox option:last").remove();​

 

 

NO. 06  기타

 

// SelecBox 아이템 갯수 구하기​ jQuery("#selectBox option").size();   // 선택된 옵션 앞의 아이템 갯수 jQuery("#selectBox option:selected").prevAll().size();   // 선택된 옵션 후의 아이템 갯수 jQuery("#selectBox option:selected").nextAll().size();​       // Getting values when item is selected jQuery("#selectBox").change(function() {            alert(jQuery(this).val());            alert(jQuery(this).children("option:selected").text()); });

출처: http://blog.naver.com/findaday/121439508