안녕하세요.
이번에는 JQuery를 SelectBox를 제어하는 방법을 알아보도록 하겠습니다.
1. 현재 선택된 값을 구하기.
1 2 3 4 5 | //-========================$("#selName option:selected").val(); //-======================== |
2. 현재 선택된 내용을 구하기.
1 2 3 4 5 | //-========================$("#selName option:selected").text(); //-======================== |
3. 선택박스에 옵션 추가하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //-========================// 기본 옵션 추가$("#selName").append("<option value='값'>이름</option>");// 옵션 최상단에 추가$("#selName").prepend("<option value='값'>이름</option>");// 특정 위치 아래에 옵션 추가$("#selName option:eq(1)").after("<option value='값'>이름</option>");// 특정 위치 위에 옵션 추가$("#selName option:eq(2)").before("<option value='값'>이름</option>");//-======================== |
4. 선택박스에 옵션 삭제하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //-========================// 첫번째 옵션 삭제하기$("#selName option:first").remove();// 마지막 옵션 삭제하기$("#selName option:last").remove();// 특정 위치 옵션 삭제하기$("#selName option:eq(3)").remove();// 모든 옵션 삭제하기$("#selName").find("option").remove(); //-======================== |
5. 특정 값으로 selected 이벤트를 주기
1 2 3 4 5 6 7 8 9 | //-========================// index 값으로 주기$("#selName option:eq(0)").attr("selected","selected");// value 값으로 주기$("#selName").val("이름").attr("selected","selected"); //-======================== |
6. 선택된 옵션의 index 구하기
1 2 3 4 5 | //-========================$("#selName option").index($("#selName option:selected")); //-======================== |
7. 선택된 옵션의 갯수 구하기
1 2 3 4 5 | //-========================$("#selName option").size(); //-======================== |
'언어 > Jquery' 카테고리의 다른 글
| Jquery.post(), Ajax을 이용하여 GET 전송하는 법 (0) | 2017.11.26 |
|---|---|
| Jquery.post(), Ajax을 이용하여 POST 전송하는 법 (0) | 2017.11.26 |
Gddong