javascript의 옵션 작업 방법 모음 tag_form 효과 선택

JavaScript는 Select 태그에서 옵션 컬렉션을 작동합니다.
먼저 옵션 컬렉션의 다음 메서드를 살펴보겠습니다.
options.add(option) 메서드는 컬렉션에 옵션 개체를 추가합니다.
options.remove(index) 메소드는 옵션 컬렉션에서 지정된 항목을 제거합니다.
options(index) 또는 options.item(index)는 인덱스를 통해 옵션 컬렉션에서 지정된 항목을 얻을 수 있습니다.

자바스크립트 코드는 다음과 같습니다.

var selectTag = null; //태그 선택
var OPTONLENGTH = 10; //매번 채워지는 옵션 수
var colls = [] //태그 옵션 선택 참조

window.onload = function(){
selectTag = document.getElementById("SelectBox"); //선택 태그 가져오기
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
random = Math.floor(Math.random()*9000)
item = new Option(random,random) ; //Option() 생성자를 통해 생성됨 option object
selectTag.options.add(item); //옵션 컬렉션에 추가}

watchState()
//새 옵션 항목을 추가하기 전 현재 옵션 지우기
function isClearOption(){
return document.getElementById("chkClear").checked
}
//옵션 지우기 컬렉션
functionclearOptions(colls){
var length = colls.length;
for(var i=length-1;i>=0;i--){
colls.remove(i );
}
}
//새 옵션 추가
function addOption(){
colls.add(createOption())
lastOptionOnFocus(colls.length-1) ;
watchState();
}//옵션 객체 생성
function createOption(){
var random = Math.floor(Math.random()*9000)
return new Option(random,random);
}
//옵션 컬렉션에 지정된 옵션 삭제
function RemoveOption(index){
if(index >= 0){
colls.remove(index);
lastOptionOnFocus(colls.length-1);
}
watchState()
}
//현재 선택된 옵션 인덱스 가져오기
함수 getSelectedIndex(){
return selectTag.selectedIndex;
}
//전체 옵션 컬렉션 수 가져오기
function getOptionLength(){
return colls.length; >//현재 선택한 옵션 텍스트 가져오기
function getCurrentOptionValue(index){
if(index >= 0)
return colls(index).value
}
//Get the 현재 선택된 옵션 값
function getCurrentOptionText( index){
if(index >= 0)
return colls(index).text;
}
//옵션의 마지막 항목 사용 포커스를 얻기 위한 컬렉션
function lastOptionOnFocus(index) {
selectTag.selectedIndex = index;
}
//선택 태그 상태 표시
function watchState(){
var divWatch = document.getElementById("divWatch");
var innerHtml="";
innerHtml = "총 옵션 수:" getOptionLength()
innerHtml = "
현재 항목 인덱스:" getSelectedIndex( );
innerHtml = "
현재 항목 텍스트:" getCurrentOptionText(getSelectedIndex());
innerHtml = "
현재 항목 값:" getCurrentOptionValue(getSelectedIndex())
divWatch.innerHTML = innerHtml;
divWatch.align = "justify";

위의 옵션 항목을 생성할 때 Option() 생성자가 사용된다는 점에 유의하세요.
1. var option = new Option(text,value); // 여기서는 Option()을 대문자로 사용합니다.
2. var option = new Option();
option.text = text; value=value;
저는 개인적으로 옵션 객체를 생성하는 첫 번째 방법을 선호합니다.
또한 select 태그에는 selectedIndex라는 더욱 유용한 속성이 있는데, 이를 통해 현재 선택된 옵션 인덱스를 가져오거나 인덱스 설정을 통해 옵션 컬렉션에서 어떤 항목을 선택할지 지정할 수 있습니다.
select.selectedIndex = select.options.length-1; //옵션 컬렉션의 마지막 항목 선택
var selectedItem = select.options(select.selectedIndex);//현재 선택한 항목 가져오기
selectedItem .text; //선택한 항목의 텍스트
selectedItem.value; //선택한 항목의 값

---

임의의 숫자로 SelectBox 초기화

지우기

---

옵션 항목 추가

---

옵션 항목 삭제

선택 여부 확인
if(objSelect.selectedIndex > -1) {
//설명이 선택됨
} else {
//설명이 선택되지 않음
}

선택한 항목 삭제
objSelect.options[objSelect .selectedIndex ] = null;

항목 추가
objSelect.options[objSelect.length] = new Option("Hello","hello")

선택한 항목 수정
objSelect.options[objSelect.selectedIndex] = new Option("Hello","hello");

선택한 항목의 텍스트 가져오기
objSelect.options[objSelect.selectedIndex].text; 🎜>
선택한 항목의 값 가져오기
objSelect.options[objSelect.selectedIndex].value