javascript Select 태그 에서 options 작업 방법 집합

javascript 작업 Select 태그 에서 options 집합 은 options 집합 의 이 몇 가지 방법 을 살 펴 보 겠 습 니 다.options.add(option)방법 은 집합 에 option 대상 을 추가 합 니 다.options.remove(index)방법 은 options 집합 에서 지정 한 항목 을 제거 합 니 다.options(index)또는 options.item(index)은 색인 을 통 해 options 집합 지정 항목 을 가 져 올 수 있 습 니 다.javascript 코드 는 다음 과 같 습 니 다:var selectTag=null;/선택 태그 var OPTONLENGTH=10;/매번 채 우기 option 수 var colls=[];/select 태그 options 에 대한 참조 window.onload=function(){selectTag=document.getElement ById("SelectBox");/select 태그 colls=selectTag.options 가 져 오기;/인용//initSelectBox()가 져 오기;/select.options}초기 화;/select.options function initSelectBox(){var random=0 을 무 작위 로 채 웁 니 다.var optionItem = null; var item = null; if(colls.length > 0 && isClearOption()){ clearOptions(colls); } for(var i=0;i=0;i--){ colls.remove(i); } } //새 option function addOption(){colls.add(createOption()를 추가 합 니 다.lastOptionOnFocus(colls.length-1); watchState(); } //option 대상 function createOption(){var random=Math.floor(Math.random()*9000)+1000 만 들 기;return new Option(random,random); } //options 집합 에서 지정 한 option function removeOption(index){if(index>=0){colls.remove(index)를 삭제 합 니 다.lastOptionOnFocus(colls.length-1); } watchState(); } //현재 선택 한 option 인덱스 function getSelectedIndex(){return selectTag.selectedIndex;}//options 집합 총수 function getOptionLength(){return colls.length;}//가 져 오기현재 선택 한 option 텍스트 function getCurrentOptionValue(index){if(index>=0)return colls(index).value;}//현재 선택 한 option 값 function getCurrentOptionText(index){if(index>=0)return colls(index).text;}//options 집합 에서 마지막 으로 초점 을 가 져 오 는 function lastOptionOnFocus(index){selectTag.selected Index=index;}//select 태그 상태 function watchState(){var divWatch=document.getElementById("divWatch")를 표시 합 니 다.var innerHtml=""; innerHtml="option 총수:"+getOptionLength();innerHtml+="
현재 항목 인덱스:"+getSelectedIndex();innerHtml+="
현재 항목:"+getCurrentOptionText(getSelectedIndex());innerHtml+="
현재 항목 값:"+getCurrentOptionValue(getSelectedIndex());divWatch.innerHTML = innerHtml; divWatch.align = "justify"; } 위 에서 option 항목 을 만 들 때 option()구조 함 수 를 사 용 했 습 니 다.이 구조 함 수 는 두 가지 버 전의 과부하 가 있 습 니 다.1、var option = new Option(text,value); //대문자 Option()2,var option=new Option();option.text = text; option.value=value; 나 는 개인 적 으로 첫 번 째 방법 으로 option 대상 을 만 드 는 것 을 비교적 좋아한다.또한,select 태그 의 또 다른 유용 한 속성 은 selected Index 입 니 다.이 를 통 해 현재 선택 한 option 색인 을 얻 거나,색인 을 통 해 지정 한 options 집합 중 어떤 것 이 선택 되 었 는 지 설정 할 수 있 습 니 다.select.selctedIndex = select.options.length-1; //options 집합 에서 마지막 선택 var selected Item=select.options(select.selected Index);/현재 선택 한 항목 을 가 져 옵 니 다.selected Item.text;/선택 한 텍스트 selected item.value;/선택 한 항목 의 값

사용 난수 초기 화 SelectBox

clear

옵션 항목 추가

삭제 옵션 항목 삭제선 택 된 if(objectSelect.selected Index>-1){//선 택 된}else{//선 택 된 항목 이 없 음 을 설명 합 니 다.objectSelect.options[objectSelect.selected Index]=null;objectSelect.options[objectSelect.length]=new Option("안녕하세요","hello")을 추가 합 니 다.선택 한 항목 의 objectSelect.options[objectSelect.selected Index]=new Option("안녕하세요","hello")을 수정 합 니 다.선택 한 텍스트 objectSelect.options[objectSelect.selected Index].text 가 져 오기;선택 한 항목 의 값 objectSelect.options[objectSelect.selected Index].value 가 져 오기;

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thymeleaf 의 일반 양식 제출 과 AJAX 제출

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

javascript Select 태그 에서 options 작업 방법 집합

사용 난수 초기 화 SelectBox

옵션 항목 추가

좋은 웹페이지 즐겨찾기