>웹 프론트엔드 >JS 튜토리얼 >jquery는 option 값을 가져오고 option_jquery에서 작동합니다.

jquery는 option 값을 가져오고 option_jquery에서 작동합니다.

WBOY
WBOY원래의
2016-05-16 17:09:20978검색

jQuery는 Select 요소를 가져오고 텍스트와 값을 선택합니다.

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

$("#select_id").change(function(){//code...}) //항목 중 하나가 선택되면 실행되는 Select 이벤트를 추가합니다
var checkText=$("# select_id").find("option:selected").text(); //Select로 선택한 텍스트 가져오기
var checkValue=$("#select_id").val( ); //Select로 선택한 값 가져오기
var checkIndex=$("#select_id ").get(0).selectedIndex; //Select로 선택한 인덱스 값 가져오기
var maxIndex=$("# select_id option:last").attr("index" ); //Select의 최대 인덱스 값 가져오기

jQuery는 Select 요소를 가져오고 텍스트와 값을 설정합니다:

인스턴스 분석:
코드 복사 코드는 다음과 같습니다.

$("#select_id " ).get(0).selectedIndex=1; //선택 인덱스 설정 값이 1인 항목이 선택되었습니다.
$("#select_id ").val(4) // 선택 값을 4로 설정합니다. 항목이 선택되었습니다.
$("#select_id option[text='jQuery'] ").attr("selected", true) //Select의 Text 값을 선택한 jQuery 항목으로 설정합니다.

jQuery는 Select 요소의 Option 항목을 추가/제거합니다:

분석 예:
코드 복사 코드는 다음과 같습니다.

$("#select_id").append( ""); 옵션(드롭다운 항목) 선택
$("#select_id").prepend("") //옵션 삽입(첫 번째 위치) ) for Select
$("#select_id option:last").remove(); //인덱스 값이 가장 큰 Select Option에서 제거(마지막 값)
$("#select_id option[index=' 0']").remove(); //Select에서 인덱스 값이 0인 옵션 삭제(첫번째)
$("#select_id option[value='3']").remove(); //Select
에서 값이 '3'인 옵션 삭제$("#select_id option[text='4']") .remove() //Select
3단계 분류

if($("#thirdLevel").val()!=0){
$("#thirdLevel 옵션[value!=0 ]").remove();
}
if($("#fourthLevelId").val()!=0){
$("#fourthLevelId 옵션[value!=0]") .remove();
}//즉, 세 번째 카테고리를 선택하려는 경우, 네 번째 카테고리에 데이터가 있으면 삭제하고, 데이터가 없는 네 번째 카테고리의 제품이 기본값이면 삭제합니다. 나중에 AJAX 기술을 배워서 자주 활용하겠습니다!


선택 가져오기:
선택한 텍스트 가져오기:
$("#ddlRegType").find("option:selected").text()
선택 항목 가져오기; 값:

$("#ddlRegType ").val();

선택한 인덱스 가져오기:
$("#ddlRegType ").get(0) selectedIndex; >선택 설정:
선택 선택 설정 인덱스:
$("#ddlRegType ").get(0).selectedIndex=index;//index는 인덱스 값입니다.

선택 선택 값 설정:




코드 복사
코드는 다음과 같습니다: $("#ddlRegType ") .attr ("value","Normal"); $("#ddlRegType ").val("Normal")
$("#ddlRegType ").get(0).value =


선택한 텍스트 설정:



코드 복사
코드는 다음과 같습니다. var count=$("#ddlRegType 옵션").length; for(var i=0;i{ if($("#ddlRegType ").get(0 ).options[i].text == 텍스트)
{
$("#ddlRegType ").get(0).options[i].selected =
break
}
}

$("#select_id option[text='jQuery']").attr("selected", true)


선택 옵션 항목을 설정합니다.



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

$("#select_id").append("") //옵션 추가
$("#select_id" ) .prepend(""); //앞에 옵션을 삽입하세요
$("#select_id option:last").remove() // 인덱스 값이 가장 큰 옵션 삭제
$("#select_id option[index='0']").remove() //인덱스 값이 0인 옵션 삭제
$("#select_id 옵션 [value='3']").remove(); //값이 3인 옵션 삭제
$("#select_id option[text='4']").remove(); //TEXT 삭제 옵션 4에 대한 값 지우기 선택

:

$("#ddlRegType ").empty()

jquery는 다음 값을 얻습니다.

val()
text()

값 설정
val('여기에 값 설정')
코드 복사 코드는 다음과 같습니다.

$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//모두 선택
})
$("#btn2").click(function (){
$("[name='checkbox']").removeAttr("checked");//모든 선택 취소
})
$("#btn3").click(function (){
$("[name='checkbox']:even").attr("checked",'true');//모든 홀수 선택
})
$("# btn4").click(function(){
$("[name='checkbox']").each(function(){//역선택
if($(this).attr("checked ")){
$(this).removeAttr("checked");
}
else{
$(this).attr("checked",'true');
}
} )
})
$("#btn5").click(function(){//선택한 값 출력
var str="";
$("[ name='checkbox' ][checked]").each(function(){
str =$(this).val() "rn";
//alert($(this).val() );
})
경고(str)
})
})

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.