티스토리 뷰

코딩/jQuery

jQuery Select box Control

Raichu 2014.03.19 09:36



select box의 내용 가져오기
$("#select_box > option:selected").val();

select box의 값 설정

$("#select_box > option[value=지정값]").attr("selected", "true");

jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();

$("#select_box > option:selected").val()

$("select[name=name]").val();

 

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

 

선택된 위치

var index = $("#test option").index($("#test option:selected"));

 

-------------------------------------------------------------------

 

// Add options to the end of a select

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

 

// Add options to the start of a select

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

 

// Replace all the options with new options

$("#selectBox")

.html("<option value='1'>oranges</option><option value='2'>Oranges</option>");

 

// Replace items at a certain index

$("#selectBox option:eq(1)")

.replaceWith("<option value='2'>apples</option>");

$("#selectBox option:eq(2)")

.replaceWith("<option value='3'>bananas</option>");

 

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").attr("selected""selected");

 

// text 값으로 select 하기

$("#selectBox").val("Some oranges").attr("selected""selected");

 

// value 값으로 select 하기

$("#selectBox").val("2");

$("#selectBox > option[@value=지정값]").attr("selected", "true");

 

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

 

// 첫번째 item 삭제

$("#selectBox option:first").remove();

 

// 마지막 item 삭제

$("#selectBox option:last").remove();

 

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

 

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

 

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

 

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

 

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

 

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

 

// 0번째 item 다음에 삽입

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

 

// 3번째 item 전에 삽입

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

 

// select box 값이 변경될때 선택된 현재값

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

           alert($(this).val());

           alert($(this).children("option:selected").text());

});



'코딩 > jQuery' 카테고리의 다른 글

단축키 만들기  (0) 2014.03.30
jQuery Date picker  (0) 2014.03.19
jQuery Select box Control  (0) 2014.03.19
해상도 상관없이 배경화면 꽉차게 하기 Backstretch  (0) 2014.01.16
Visual jQuery 1.2.6  (0) 2013.01.31
jQuery ContextMenu Plugin  (0) 2013.01.31
댓글
댓글쓰기 폼