Jquery Select 작업 방법 수집 스크립트 홈 특별판_jquery

jQuery 프레임워크를 사용하면 HTML 요소를 더 쉽게 조작할 수 있습니다. 처음에는 Select 작업에 익숙하다고 생각했는데, 아침에 테스트를 해보니 정말 아는 것이 별로 없었습니다.

jQuery의 몇 가지 메소드를 살펴본 후 일반적으로 사용되는 몇 가지 메소드를 정리했습니다.

//첫 번째 옵션의 값 가져오기
$('#test option:first').val();
//마지막 옵션 값
$('#test option:last').val()
//두 번째 옵션 값 가져오기 option
$('#test option:eq(1)').val();
//선택한 값 가져오기
$('#test').val()
$ ( '#test option:selected').val();
//값이 2인 옵션을 선택한 상태로 설정
$('#test').attr('value','2') ;
//선택할 첫 번째 옵션 설정
$('#test option:last').attr('selected','selected')
$("#test").attr (' 값' , $('#test 옵션:마지막').val())
$("#test").attr('value' , $('#test 옵션').eq($ (' #test option').length - 1).val());
//select 길이 가져오기
$('#test option').length
//옵션 추가
$("#test").append("ff")
$("ff").appendTo("#test"); >//선택한 항목 추가 및 제거
$('#test option:selected').remove()
//지정한 항목 선택
$('#test option:first'). Remove();
//지정된 값이 삭제됩니다
$('#test option').each(function(){
if( $(this).val() == '5' ){
$( this).remove();
}
})
$('#test option[value=5]').remove(); >//첫 번째 그룹 레이블 가져오기
$('#test optgroup:eq(0)').attr('label')
//두 번째 그룹 아래 첫 번째 옵션 값 가져오기
$('# test optgroup:eq(1) :option:eq(0)').val()


select 및 value에서 선택한 텍스트와 관련된 값 가져오기

select로 선택한 텍스트 가져오기: var checkText=$("#slc1").find("option:selected").text() select로 선택한 값 가져오기: var checkValue =$("#slc1"). val();
select로 선택한 인덱스 값 가져오기: var checkIndex=$("#slc1 ").get(0).selectedIndex; 선택: var maxIndex=$("#slc1 option:last").attr("index")


선택한 텍스트 및 값 설정


설정 선택 인덱스 값이 1인 항목: $( "#slc1 ").get(0).selectedIndex=1 항목을 선택하려면 선택 값을 4로 설정: $("#slc1 ").val; (4); Select JQuery의 텍스트 값 설정:
$("#slc1 option[text='jQuery']").attr("selected", true)
PS: 지불 세 번째 항목의 사용에 특별한 주의를 기울이십시오. JQuery의 선택기 기능이 얼마나 강력한지 살펴보세요!


옵션 항목 추가 및 삭제


선택 옵션(드롭다운 항목)을 추가하여 $("#slc2").append("" i "
");
선택 옵션(첫 번째 위치) 삽입
$("#slc2").prepend("를 선택하세요");
PS : prepend 이것은 처음에 일치하는 모든 요소 안에 콘텐츠를 삽입하는 가장 좋은 방법입니다.
선택 항목에서 인덱스 값이 가장 큰 옵션(마지막 항목)을 삭제합니다. $("#slc2 option:last").remove() 선택 항목에서 인덱스 값이 0인 옵션을 삭제합니다. select (첫 번째 것)
$("#slc2 option[index='0']").remove()
select에서 값이 '3'인 옵션 삭제
$("# slc2 option[value='3' ]").remove();
select에서 text='4'인 옵션을 삭제합니다
$("#slc2 option[text='3']").remove ();

관련 보충 정보:

js 플러그인을 사용하면 Jquery 선택 작업이 간단하고 편리합니다.


JQuery 선택 태그 작업 코드 세그먼트