Javascript & JQuery & CSS

jQuery - selectbox - 선택된 value 값
 

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

jQuery - selectbox - 선택된 Text 값

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

jQuery - selectbox - 선택된 위치 찾기(index)

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

JQuery - selectbox - option 추가

     //option 추가 - 마지막
     $("#selectBox").append("<option value="화이트">화이트</option>");
     $("#selectBox").append("<option value="그린">그린</option>");
     $("#selectBox").append("<option value="블랙">블랙</option>");
  
     //option 추가 - 처음
     $("#selectBox").prepend("<option value="블랙">블랙</option>");

     //option 추가 - 0번째 item 다음에 삽입
     $("#selectBox option:eq(0)").after("Some pears");

     //option 추가 - 3번째 item 전에 삽입
     $("#selectBox option:eq(3)").before("Some apricots");

jQuery - selectbox - option 삭제  

     // 모든  item 삭제
     $("#selectBox").children('option').remove();

     // 지정된 인덱스 값의 item 삭제
     $("#selectBox option:eq(0)").remove();

      // 첫번째 item을 빼고 나머지 삭제
     $("#selectBox option:not(:first)").remove();

      // 첫번째 item 삭제
     $("#selectBox option:first").remove();

      // 마지막 item 삭제
      $("#selectBox option:last").remove();

jQuery - selectbox - 새로운 option 생성

      $("#selectBox").html("<option value="111">111</option><option value="222">222");

jQuery - selectbox - option 변경
    
     //2번째 인덱스값의 option 변경
     $("#selectbox option:eq(1)").replaceWith("<option value="2번째">2번째");

jQuery - selectbox - selected 방법

     //지정된 index 값으로 selected 하기
     $("#selectBox option:eq(2)").attr("selected", "selected");

     // value 값으로 selected 하기
     $("#selectBox").val("Some oranges").attr("selected", "selected");
     $("#selectBox > option[@value=지정값]").attr("selected", "true");
     $("#selectBox").val("2");
jQuery - selectbox - option 갯수

     // SelecBox 아이템 갯수 구하기
     $("#selectBox option").size();

     // 선택된 옵션 앞의 아이템 갯수
     $("#selectBox option:selected").prevAll().size();
  
     // 선택된 옵션 후의 아이템 갯수
     $("#selectBox option:selected").nextAll().size();

jQuery - selectbox disabled 속성 적용

     $('#select_box').attr('disabled', 'true');

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

     $("#selectBox").change(function() {
          this_value = $(this).val();
          this_txt   = $(this).children("option:selected").text();
     });

Javascript - selectbox option 추가

     var selectbox = document.getElementById("j_selectbox");
     selectbox.options[1] = new Option("text추가1","text1");
     selectbox.options[2] = new Option("text추가2","text2");
     selectbox.options[3] = new Option("text추가3","text3");

javascript - selectbox 선택된 index 값

     selectbox = document.getElementById('j_selectbox');
     idx = selectbox.selectedIndex;

Javascript -selectbox 특정위치 selected

     selectbox = document.getElementById('j_selectbox');
     selectbox[5].selected = true;

Javascript -selectbox - option 길이

     selectbox = document.getElementById('j_selectbox');
     len = selectbox .length;

Javascript - selectbox - 선택된 value/text 구하기

     var selectbox = document.getElementById("j_selectbox");
     idx = selectbox.selectedIndex;
 
     val = selectbox.item(idx).value; 
     txt = selectbox.item(idx).text;
     또는
     val = selectbox.options[idx].value;
     txt = selectbox.options[idx].text;

     val = selectbox.value;

Javascript - selectbox - disabled 적용

      selectbox.disabled = true;
      selectbox.disabled = false;