> 웹 프론트엔드 > JS 튜토리얼 > jQuery는 선택 항목(구현 코드)을 동적으로 추가 및 삭제합니다.

jQuery는 선택 항목(구현 코드)을 동적으로 추가 및 삭제합니다.

巴扎黑
풀어 주다: 2017-06-29 10:08:29
원래의
1330명이 탐색했습니다.

다음은 jQuery동적으로 추가삭제항목 선택에 대한 자세한 분석 및 소개입니다. 필요한 친구들은 와서 참고하시면 됩니다

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


//
함수 col_add( ) {
var selObj = $("#mySelect");
var value="value";
var text="text";
selObj.append("");
}
//
function col_delete() {
var selOpt = $("#mySelect option:selected");
삭제 selOpt.remove();
}
// Clear
function col_clear() {
var selOpt = $("#mySelect option");
selOpt.remove();
}


위 방법은 jQuery용입니다. 선택 항목을 동적으로 추가, 삭제 및 지우기. 순수 js를 작성하는 방법은 다음과 같습니다.

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


var sid = document.getElementById("mySelect");
sid.options[sid.options.length ]=new Option(" text","value"); // 선택 끝에 항목 추가


기타 일반적으로 사용되는 방법:

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


$("#mySelect").change(function( ){//code...}); //선택한 항목이 변경되면 트리거됩니다

// 선택 값 가져오기
var text=$("#mySelect") .find("option:selected").text() ; //텍스트
var 값 가져오기=$("#mySelect").val() //값 가져오기
var value=$("#mySelect 옵션 :selected").attr( "value"); //선택 항목의 값을 가져옵니다
var index=$("#mySelect").get(0).selectedIndex; //선택 항목의 index 값을 가져옵니다. 0부터 시작하는 항목 선택 var index =$("#mySelect option:selected").attr("index"); //사용할 수 없습니다! ! !
var index=$("#mySelect option:selected").index(); //Select 항목의 인덱스 값을 0부터 가져옵니다. var maxIndex=$("#mySelect option:last").attr( " 인덱스"); //사용할 수 없습니다! ! !
var maxIndex=$("#mySelect option:last").index();//0부터 시작하여 Select의 최대 인덱스 값을 가져옵니다.
$("#mySelect").prepend(""); //Select

의 첫 번째 항목 앞에 항목을 삽입합니다.//선택 값을 설정합니다

//색인에 따라 선택한 항목을 설정합니다

$("#mySelect") .get(0).selectedIndex =index;//index는 인덱스 값입니다.
//값에 따라 선택한 항목을 설정합니다
$("#mySelect").attr("value","newValue")
$( "#mySelect").val("newValue ");
$("#mySelect").get(0).value = value
//텍스트에 따라 해당 항목을 선택한 항목으로 설정
var count= $("#mySelect 옵션").length;
for (var i=0;i{
if($("#mySelect").get(0).options[i].text = = 텍스트)
{
$("#mySelect") .get(0).options[i].selected = true
                                             휴식;

위 내용은 jQuery는 선택 항목(구현 코드)을 동적으로 추가 및 삭제합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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