>웹 프론트엔드 >JS 튜토리얼 >JS 및 JQuery는 선택 옵션을 동적으로 추가합니다.

JS 및 JQuery는 선택 옵션을 동적으로 추가합니다.

高洛峰
高洛峰원래의
2017-01-03 16:49:391825검색

오늘 친구가 221f08282418e2996498697df914ce4e에서 옵션을 동적으로 추가하는 방법에 대해 질문했습니다. 처음에는 JS에서 동적으로 옵션을 추가하는 줄 알고 JS에서 동적으로 옵션을 추가하는 방법을 사용했는데 JQuery를 사용하셨기 때문에 거기에 있습니다. 항상 오류가 발생합니다. JS와 JQuery에서 옵션을 추가하는 것의 차이점에 유의하세요.

JS:

var selid = document.getElementById("sltid");
for(var i=0; i<10;i++){ //循环添加多个值
sid.option[i] = new Option(i,i);
}
sid.options[sid.options.length]=new Option("1","2"); // 在最后一个值后面添加多一个

JQuery:

$("#selectId").append("<option value=&#39;"+value+"&#39;>"+text+"</option>");

물론 이 문장 외에도 기본 선택값, 첫 번째 값, 마지막 값, N번째 값 등을 설정하는 방법도 있어서 온라인으로 검색해봤습니다:

jQuery는 Select로 선택한 텍스트와 값을 가져옵니다.

1. $("#select_id").change(function(){//code...}) // is Select는 항목 중 하나가 선택될 때 트리거되는 이벤트를 추가합니다

2. var checkText=$("#select_id").find("option:selected").text() ; //선택한 텍스트 가져오기

3. var checkValue=$("#select_id").val() //선택한 값 가져오기

4. checkIndex= $("#select_id ").get(0).selectedIndex; //Select

의 인덱스 값을 가져옵니다. var maxIndex=$("#select_id option:last"). attr( "index"); //Select

jQuery의 최대 인덱스 값을 가져와 Select의 Option 항목을 추가/삭제합니다:

1. #select_id").append("15ba1cdaec20352f688ebe8ab9039218Text4afa15d3069109ac30911f04c56f3338"); //Select에 옵션(드롭다운 항목) 추가

2. $("#select_id") .prepend("b93adbf83522c105f4709f0807fe84ae선택하세요4afa15d3069109ac30911f04c56f3338") //선택을 위한 옵션(첫 번째 위치) 삽입

3. $( "#select_id option:last").remove(); //Select에서 가장 큰 index 값을 가진 Option(마지막 것)

4. option[index='0'] ").remove(); //Select

에서 인덱스 값이 0인 옵션(첫 번째)을 삭제합니다. $("#select_id option[value=' 3']").remove(); //옵션 삭제

5. $("#select_id option[text='4']").remove(); //옵션 삭제 with Text='4' in Select

위 내용은 에디터가 소개한 JS & JQuery의 동적 선택 옵션 추가에 대한 지식입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 시간 내에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

더 많은 JS 및 JQuery에 선택 옵션을 동적으로 추가하는 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!


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