테스트 사이트 - 개발 중인 베타 버전입니다

[펌] jQuery select box

· 13년 전 · 4811 · 1

jQuery로 선택된 값 읽기
$("#select_box option:selected").val();
$("select[name=name]").val();

jQuery로 선택된 내용 읽기
$("#select_box option:selected").text();

선택된 위치
var index = $("#test option").index($("#test option:selected")); 

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

// Add options to the end of a select
$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");

// Add options to the start of a select
$("#myselect").prepend("<option value='0'>Before Apples</option>");

// Replace all the options with new options
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");

// Replace items at a certain index
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

// Set the element at index 2 to be selected
$("#myselect option:eq(2)").attr("selected", "selected");

// Set the selected element by text
$("#myselect").val("Some oranges").attr("selected", "selected");

// Set the selected element by value
$("#myselect").val("2");

// Remove an item at a particular index
$("#myselect option:eq(0)").remove();

// Remove first item
$("#myselect option:first").remove();

// Remove last item
$("#myselect option:last").remove();

// Get the text of the selected item
alert($("#myselect option:selected").text());

// Get the value of the selected item
alert($("#myselect option:selected").val());

// Get the index of the selected item
alert($("#myselect option").index($("#myselect option:selected")));

// Alternative way to get the selected item
alert($("#myselect option:selected").prevAll().size());

// Insert an item in after a particular position
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");

// Insert an item in before a particular position
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");

// Getting values when item is selected
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});




댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

좋네요

게시글 목록

번호 제목
28403
28402
28401
28398
28397
28394
4504
26593
4502
18132
28388
4496
4491
4486
4483
4482
4479
18122
18120
26590
18113
24419
4474
4465
4461
4460
4451
26589
퍼블리셔 이뻐요^^
4450
4448
24418
31037
26390
4446
26585
26581
26578
18098
4443
18097
26388
18094
30596
26387
18091
4445
18088
18086
18085
18082
18081
18078
18076
18074
18072
18070
18069
18066
18064
18057
18056
30588
18055
18054
30585
18051
18050
18048
18047
18044
26386
18042
30580
4425
18039
18037
18031
18028
18027
18022
18018
18016
18009
4423
18003
18000
17999
17996
17993
17989
17987
17986
17985
17984
4411
17979
30576
26383
17975
30569