jQuery select box Control 제어

 

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()); });

<select name="test"></select> // 추가 $("< OPTION >< /OPTION >")   .attr("selected", "selected")   .text("추가")   .attr("value", "추가")   .appendTo("select[name='test']"); // 선택 var value = $("select[name='test'] option:selected").val(); var name = $("select[name='test'] option:selected").text(); // 특정 삭제 $("select[name='test'] option[value='추가']").remove(); // 선택 삭제 $("select[name='test'] option:selected").remove(); // 모두 삭제 $("select[name='test'] option").remove();