JQuery Select Box 제어 -- JQuery




JQuery에 다른 기능을 검색하다가 아래의 사이트를 발견하여 나중에 도움이 될 듯하여 정리해둔다.

1. jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();
$("select[name=name]").val();


2. jQuery로 선택된 내용 읽기

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

3. 선택된 위치

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


4. Add options to the end of a select

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

5. Add options to the start of a select

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

6. Replace all the options with new options

$("#selectBox").html("<option value='1'>Some oranges</option><option value='2'>MoreOranges</option>");
 

7. Replace items at a certain index

$("#selectBox option:eq(1)").replaceWith("<option value='2'>Someapples</option>");
$("#selectBox option:eq(2)").replaceWith("<option value='3'>Somebananas</option>");
 

8. 지정된 index값으로 select 하기

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


9. text 값으로 select 하기

$("#selectBox").val("Someoranges").attr("selected", "selected");

  방법1)
  $("#selectBox option").filter(function() {return this.text == 'searchText';}).prop('selected', 'selected');

  방법2)
  $('#selectBox > option').each(function() {
      if($(this).text() == 'searchText') {
         $(this).prop('selected', 'selected');
      }
  });

  방법3) 
  $("#selectBox option:contains('searchText')").prop('selected', 'selected');


10. value값으로 select 하기

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

11. 지정된 인덱스값의 item 삭제

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


12. 첫번째 item 삭제

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


13. 마지막 item 삭제

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

14. 선택된 옵션의 text 구하기

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


15. 선택된 옵션의 value 구하기

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


16. 선택된 옵션 index 구하기

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


17. SelecBox 아이템 갯수 구하기

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


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

alert(!$("#selectBox option:selected").prevAl!l().size());


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

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

20. Insert an item in after a particular position

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

21. Insert an item in before a particular position

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

22. Getting values when item is selected

$("#selectBox").change(function(){
           alert(!$(this).val());
           alert(!$(this).children("option:selected").text());
});


핑백

  • jquery 핵심 정리. | BUYWORKSELL 2013-08-11 01:31:38 #

    ...     alert(!$(this).children(&#8220;option:selected&#8221;).text()); }); 출처 : http://tiger5net.egloos.com/5667935 [HTML &amp; CSS 강의 및 Jquery 강의] http://tutsplus.com/course ... more

  • Theo hieu biet cua tac gia, mot vai nghien cuu cho ? 2018-02-04 13:27:23 #

    ... iep xuc voi chat not infected themselves; the chien tranh Viet Nam. Hence Noni appears to IN SOME SELECTED of non destructive editing. This includes reviewing increased and teeth. The passage of unoxy ... more

덧글

  • 남상현 2014/02/07 17:47 # 삭제 답글

    좋은 정보 감사합니다~! 퍼가도 되지요? ^^;
  • 어린왕자 2014/02/15 07:56 # 답글

    네 물론입니다.
  • 영봄 2014/06/23 09:12 # 삭제 답글

    감사합니다. 이해가 팍팍되네용
  • ㅎㅎㅎ 2014/06/24 17:58 # 삭제 답글

    select tag 종결판이내요 감사합니다.
  • 어린왕자 2014/06/25 21:05 # 답글

    저도 퍼온 글인데 유용한 정보죠 ㅎ
  • 바람 2014/09/17 20:03 # 삭제 답글

    정말 정리가 잘 되었네요.
    고맙습니다.
  • 크로냥냥이 2014/10/14 14:59 # 삭제 답글

    좋은정보라서 퍼가겠습니다.
    감사합니다.
  • 용용이 2014/12/22 10:25 # 삭제 답글

    정리 잘되있내요 감사합니다
  • 용용도사 2015/01/20 10:54 # 삭제 답글

    잘보고갑니다^^
  • 가디플래머 2015/02/27 15:11 # 삭제 답글

    와 덕분에 도움 되었습니다 즐프하세요 ~
  • 붉은바람 2016/03/23 13:15 # 삭제 답글

    좋은정보라 자주 들어와서 보는 페이지라서...
    좋은 정보 너무나 감사합니다.
  • ㅇㅇ 2016/07/24 15:25 # 삭제 답글

    참고로말하자면, value 가져올때, jquery방식으로 가져오는건 매우매우 불편하고, 느리죠.
    select 기반으로 찾는다니 이게 얼마나 비효율적인건지;;
    일반적인 기본 dom객체의 value속성으로 참조하는게 훨신 효율적입니다.
    event function 내에서는 this가 dom객체로 정의되니 this.value 이렇게만해줘도 바로 value값을 얻을수 있는데 왜 저렇게 불편하게 selected로 참조한다는게 널리퍼졌는지 이해가 잘안되네요.
  • 어린왕자 2016/07/28 09:26 # 답글

    과거에는 dom만이 사용되었으나 jquery도 생겼으니 선택사항이겠죠 ㅎ 개인적으론 어떤 코드 땐 dom이 편한적도 있다는데 동감합니다.
  • ㅁㄴ 2017/06/19 00:30 # 삭제 답글

    퍼갈께영~!
  • 도움됐어요 2017/09/05 16:12 # 삭제 답글

    도움됐습니다.
  • 쥐똥 2018/07/03 17:42 # 삭제 답글

    9번이 잘못된거같네요..
  • 어린왕자 2018/09/11 16:24 #

    잘못된 사항 수정하였습니다. 감사합니다 ^^
  • 사슴영혼 2018/07/22 23:14 # 삭제 답글

    잘읽고갑니다~!좋은정보 감사하고 퍼갈게요^^문제생기면 댓글주시면 조치하겠습니다!!!
댓글 입력 영역



20140817_300_250

통계 위젯 (화이트)

7177
1073
1039939