250x250
Notice
Recent Posts
Recent Comments
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |
Tags
- Eclipse
- myBatis
- oracle
- error
- PostgreSQL
- MSSQL
- Thymeleaf
- Open Source
- AJAX
- Tomcat
- SpringBoot
- 설정
- Python
- ubuntu
- JDBC
- maven
- IntelliJ
- Spring Boot
- Core Java
- MySQL
- 오픈소스
- Docker
- 문서
- Exception
- spring
- Source
- jpa
- git
- STS
- JavaScript
Archives
- Today
- Total
헤르메스 LIFE
[Javascript] Select box Control 제어 본문
728x90
$("#셀렉트박스ID option:selected").val();
$("select[name=name]").val();
$("#셀렉트박스ID option:selected").val();
$("select[name=name]").val();
$("#셀렉트박스ID option:selected").text();
var index = $("#test option").index($("#test option:selected"));
-------------------------------------------------------------------
// Add options to the end of a select
$("#셀렉트박스ID").append("");
$("#셀렉트박스ID").append("");
// Add options to the start of a select
$("#셀렉트박스ID").prepend("");
// Replace all the options with new options
$("#셀렉트박스ID").html("");
// Replace items at a certain index
$("#셀렉트박스ID option:eq(1)").replaceWith("");
$("#셀렉트박스ID option:eq(2)").replaceWith("");
// 지정된 index 값으로 select 하기
$("#셀렉트박스ID option:eq(2)").attr("selected", "selected");
// text 값으로 select 하기
$("#셀렉트박스ID").val("Some oranges").attr("selected", "selected");
// value 값으로 select 하기
$("#셀렉트박스ID").val("2");
// 선택된 옵션의 text 구하기
alert($("#셀렉트박스ID option:selected").text());
// 선택된 옵션의 value 구하기
alert($("#셀렉트박스ID option:selected").val());
// 선택된 옵션의 value 구하기
var value = $( "select[name='test'] option:selected" ).val();
// 선택된 옵션의 text 구하기
var name = $( "select[name='test'] option:selected" ).text();
// 선택된 옵션 index 구하기
alert($("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected")));
// SelecBox 아이템 갯수 구하기
alert($("#셀렉트박스ID option").size());
// 선택된 옵션 앞의 아이템 갯수
alert($("#셀렉트박스ID option:selected").prevAll().size());
// 선택된 옵션 후의 아이템 갯수
alert($("#셀렉트박스ID option:selected").nextAll().size());
// Insert an item in after a particular position
$("#셀렉트박스ID option:eq(0)").after("");
// Insert an item in before a particular position
$("#셀렉트박스ID option:eq(3)").before("");
// Getting values when item is selected
$("#셀렉트박스ID").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});
// 지정된 인덱스 값의 item 삭제
$("#셀렉트박스ID option:eq(0)").remove();
// 첫번째 item 삭제
$("#셀렉트박스ID option:first").remove();
// 마지막 item 삭제
$("#셀렉트박스ID option:last").remove();
// 특정 item 삭제
$("select[name='S_SINS_TYPE'] option[value='3']").remove();
// 선택 item 삭제
$("select[name='S_SINS_TYPE'] option:selected").remove();
// 모든 item 삭제
$( "select[name='S_SINS_TYPE'] option" ).remove();
// Select Option 중 ~를 제외하고 삭제
function delOption() {
var idxs = "";
if(bill_job_type[0].trim().length > 1) {
for(var j = 0; j < bill_job_type.length; j++) {
$( "#S_BILL_JOB_TYPE option" ).each(function(idx) {
if($(this ).val() == bill_job_type[j]) idxs = idxs + "option:eq(" + idx + ")," ;
});
}
//alert(idxs.substring(0, idxs.length - 1));
// $( "#S_BILL_JOB_TYPE option:not(option:eq(1), option:eq(2) )").remove(); 이런 형식이 됨
$( "#S_BILL_JOB_TYPE option:not(" + idxs + ")").remove();
}
}
// Select 객체를 변경했을 때 이벤트 처리
// Attribute 변경. (remove, attr)
// outerHTML
var selectElem = $( "#SELECT_BOX" );
selectElem.bind( "change", function (x) {
if(selectElem.val() == "J" ) {
$( "#S_COM_CD").removeAttr("keyfield" );
} else {
$( "#S_COM_CD").attr("keyfield" , "Y");
}
});
728x90
'JSP&JavaScript&HTML' 카테고리의 다른 글
| [JSON] 문자열을 JSON 변환, JSON 을 문자열 변환 (1) | 2021.01.26 |
|---|---|
| 오른쪽 마우스 금지 (0) | 2020.12.17 |
| [Javascript] setTimeout (1) | 2020.12.02 |
| [HTML] HTML 특수문자 코드표 (0) | 2020.12.02 |
| [Javascript] Function 모음. (0) | 2020.12.02 |