> 웹 프론트엔드 > JS 튜토리얼 > select_jquery에 대한 Jquery의 추가, 삭제, 수정 및 확인 작업

select_jquery에 대한 Jquery의 추가, 삭제, 수정 및 확인 작업

WBOY
풀어 주다: 2016-05-16 16:15:12
원래의
971명이 탐색했습니다.

추가, 삭제, 수정, 확인이라는 전통적인 4가지 작업에서 벗어날 수 없습니다.

[추가됨]:

코드 복사 코드는 다음과 같습니다.

$("#select_id").append("") //Select
에 옵션(드롭다운 항목)을 추가합니다. $("#select_id").prepend("") //선택
을 위한 옵션(첫 번째 위치)을 삽입합니다.

[삭제됨]:

코드 복사 코드는 다음과 같습니다.

$("#select_id option:last").remove(); //Select에서 index 값이 가장 큰 Option(마지막 것)을 삭제합니다
$("#select_id option[index='0']").remove(); //Select
에서 인덱스 값이 0인 옵션(첫 번째)을 삭제합니다. $("#select_id option[value='3']").remove(); //Select에서 값이 '3'인 옵션 삭제
$("#select_id option[text='4']").remove(); //Select에서 Text='4'인 옵션 삭제
$("#select_id").empty(); //비어있음

[변경](선택 항목 설정):

코드 복사 코드는 다음과 같습니다.

$("#select_id ").get(0).selectedIndex=1; //Select index 값을 1로 설정하여 선택
$("#select_id ").val(4); //항목을 선택하려면 선택 값을 4로 설정하세요.
$("#select_id option[text='jQuery']").attr("selected", true); //Select의 Text 값을 선택한 jQuery 항목으로 설정

[확인](선택한 값 가져오기):

1. 선택한 항목의 값을 가져옵니다

코드 복사 코드는 다음과 같습니다.

$("#select_id").val(); //선택한 항목의 값을 가져옵니다
$("#select_id ").get(0).selectedIndex; //선택한 항목의 인덱스 값을 가져옵니다
$("#select_id").find("option:selected").text(); //선택한 항목의 텍스트 가져오기
$("#select_id option:last").attr("index") //Select의 최대 인덱스 값을 가져옵니다

코드 샘플이 첨부되어 있습니다. 코드 기능은 실제 선택된 "연도"와 "월"에 따라 "일" 옵션의 일 수를 변경하는 것입니다.

PHP로 작성하면 기본 $("select.day")는 기본값이 1월이므로 처음에는 31일입니다.

코드 복사 코드는 다음과 같습니다.

<이름 선택 ="date_year" class="연도"> //연도
for ($연도 = 1990; $연도 <= 날짜("Y"); $연도) {
?>
            
}
?>

코드 복사 코드는 다음과 같습니다.

<이름 선택 ="날짜_월" 클래스="월"> //월
for ($월 = 1; $월 <= 12; $월) {
?>
            
}
?>

코드 복사 코드는 다음과 같습니다.

<이름 선택 ="date_day" class="day"> //요일
for ($day = 1; $day <= 31; $day) {
?>
            
}
?>

jquery 코드:

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수() {
$("select.month, select.year").change(function() { //"연도" 및 "월"이 변경되면 "일"이 변경될 수 있습니다
            $("select.day").empty() //매우 중요합니다. 먼저 삭제하세요
for (var i = 1; i                var 옵션 = $(""); //일수가 31일인 경우 옵션 추가
}
If (월 === 2) {
                $("select.day 옵션:마지막").remove();
                $("select.day option:last").remove() //2월의 일수는 28입니다
          var year = $("select.year").val();
If ((연도 % 4 === 0 && 연도 % 100) || 연도 % 400 === 0)
                  $("select.day").append(""); //윤년의 2월 일수에 1을 더합니다
}
});
});

위는 jQuery의 선택 작업 추가, 삭제, 수정 및 확인 구현을 요약한 것입니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿