[ HTML ] SELECT

참조 : http://blog.naver.com/findaday?Redirect=Log&logNo=121439508

==========
   JQuery
==========

--------------------
   HTML 구조
--------------------

<select id="selectBox" name="selectBox">
   <option value=""></option>
   <option value="first">first</option>
   <option value="second">second</option>
   <option value="third">third</option>
</select>

----------------------------------------
   jQuery 로 선택된 값 읽기
----------------------------------------

// 선택된 옵션의 text 구하기
jQuery("#selectBox option:selected").text();

// 선택된 옵션의 value 구하기
jQuery("#selectBox option:selected").val();
jQuery("select[name=selectBox]").val();

// 선택된 옵션 index 구하기
jQuery("#selectBox option").index(jquery("#selectBox option:selected"));

----------------------------------------
   jQuery 로 value 값 기준 선택
----------------------------------------

 

$("#txtCkind").val("").prop("selected", true);

------------------------------
   option 값 추가
------------------------------

// 마지막에 option 추가
jQuery("selectBox").append("<option value=``></option>");

===================================================================================

<select name="txtSelect" id="txtSelect" style="border:1px solid #DDDDDD;">
    <option value="1">내용 01</option>
    <option value="2">내용 02</option>
    <option value="3" SELECTED>내용 03</option>
</select>
 
 
■ JSP
 
<select name="classtype">
    <% String tmpClasstype = scheduleBean.getClasstype(); %>
    <option value="1" <%=tmpClasstype.equals("2")?"SELECTED":""%>>공통</option>
    <option value="2" <%=tmpClasstype.equals("2")?"SELECTED":""%>>대학</option>
    <option value="3" <%=tmpClasstype.equals("3")?"SELECTED":""%>>대학원</option>
</select><%=tmpClasstype%>
 
※ 문자는 "" 을 사용해야 하는 것으로 보임 "" 사용하니까 문자 비교가 안 되는 것 같음 ( 정확한 원인을 아직 잘 모름 )

=====================================================================================

# select 속성
 
length
: 리스트 박스에 포함되어 있는 목록의 수
 
name
: 리스트 박스의 이름
 
options[i].defaultSelected
: 각 목록이 처음 선택되어 있는지의 여부
 
option[i].index
: 각 목록의 인덱스
 
option[i].selected
: 각 목록이 현재 선택되어 있는지의 여부
 
option[i].text
: 각 목록의 문자열
 
option[i].value
: 각 목록에 할당되어 있는 값
 
options
: 리스트 박스에 포함된 목록 정보의 배열
 
selectedIndex
: 리스트 박스에서 현재 선택된 목록의 인덱스
 
type
: <input> 태그의 type 값
 
 
 
# select 메소드
 
add()
: 생성한 option 개체를 삽입 (IE 전용)
 
remove()
: option 개체를 제거 (IE 전용)