javascript는 HTML 드롭다운 목록 Tags_javascript 기술을 어떻게 작동합니까?

먼저 일반적인 구현 아이디어에 대해 말씀드리겠습니다. 구체적인 내용은 아래를 참조하세요.

선택 옵션에 Value="paraValue"인 항목이 있는지 확인

선택 옵션에 항목 추가

선택 옵션에서 항목 삭제

선택에서 선택한 항목 삭제

선택 옵션에서 value="paraValue" 텍스트를 "paraText"로 수정하세요.

select에서 text="paraText"로 첫 번째 항목을 선택하도록 설정

select에서 value="paraValue"인 항목이 선택되도록 설정

select의 현재 선택된 항목의 값을 가져옵니다

select의 현재 선택된 항목의 텍스트 가져오기

select의 현재 선택된 항목의 Index를 가져옵니다

선택한 항목 지우기

js 코드

// 1. 선택 옵션에 Value="paraValue"인 항목이 있는지 확인합니다.

function jsSelectIsExitItem(objSelect, objItemValue) {    
  var isExit =false;    
  for (var i =0; i < objSelect.options.length; i++) {    
    if (objSelect.options[i].value == objItemValue) {    
      isExit =true;    
      break;    
    }    
  }    
  return isExit;    
}

// 2. 선택옵션에 아이템 추가

function jsAddItemToSelect(objSelect, objItemText, objItemValue) {    
  //判断是否存在    
  if (jsSelectIsExitItem(objSelect, objItemValue)) {    
    alert("该Item的Value值已经存在");    
  }else{    
    var varItem =new Option(objItemText, objItemValue);   
    objSelect.options.add(varItem);   
    alert("成功加入");   
  }    
} 

// 3. 선택 옵션에서 항목 삭제

function jsRemoveItemFromSelect(objSelect, objItemValue) {    
  //判断是否存在    
  if (jsSelectIsExitItem(objSelect, objItemValue)) {    
    for (var i =0; i < objSelect.options.length; i++) {    
      if (objSelect.options[i].value == objItemValue) {    
        objSelect.options.remove(i);    
        break;    
      }    
    }    
    alert("成功删除");    
  }else{    
    alert("该select中 不存在该项");    
  }    
}

// 4. 선택

에서 선택한 항목을 삭제합니다.

function jsRemoveSelectedItemFromSelect(objSelect) {    
  var length = objSelect.options.length -1;  
  for(var i = length; i >=0; i--){  
    if(objSelect[i].selected ==true){  
      objSelect.options[i] =null;  
    }  
  }  
}

// 5. 선택 옵션의 value="paraValue" 텍스트를 "paraText"로 수정합니다.

function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {    
  //判断是否存在    
  if (jsSelectIsExitItem(objSelect, objItemValue)) {    
    for (var i =0; i < objSelect.options.length; i++) {    
      if (objSelect.options[i].value == objItemValue) {    
        objSelect.options[i].text = objItemText;    
        break;    
      }    
    }    
    alert("成功修改");    
  }else{    
    alert("该select中 不存在该项");    
  }    
}

// 6. select에서 text="paraText"로 첫 번째 항목을 선택하도록 설정

function jsSelectItemByValue(objSelect, objItemText) {      
  //判断是否存在    
  var isExit =false;    
  for (var i =0; i < objSelect.options.length; i++) {    
    if (objSelect.options[i].text == objItemText) {    
      objSelect.options[i].selected =true;    
      isExit =true;    
      break;    
    }    
  }       
  //Show出结果    
  if (isExit) {    
    alert("成功选中");    
  }else{    
    alert("该select中 不存在该项");    
  }    
}

/// 7. 선택 항목에서 value="paraValue"로 항목을 선택하도록 설정

document.all.objSelect.value = objItemValue;   

/// 8. select의 현재 선택된 항목의 값을 가져옵니다

var currSelectValue = document.all.objSelect.value;

// 9. select의 현재 선택된 항목의 텍스트를 가져옵니다

var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

///10 현재 선택 항목의 인덱스를 가져옵니다

var currSelectIndex = document.all.objSelect.selectedIndex; 

// 11. 선택한 항목 지우기

document.all.objSelect.options.length =0; 

위 내용은 자바스크립트를 사용하여 html 드롭다운 목록 태그를 작동하는 방법을 소개합니다. 모두가 이 글을 좋아하길 바랍니다.