JavaScript 작업 html 드롭다운 목록 태그의 예에 대한 자세한 설명

드롭다운 목록은 웹사이트 프론트 엔드 개발에서 자주 접하게 됩니다. html 드롭다운 목록 태그를 작동하는 방법 이 문서에서는 자바스크립트로 html 드롭다운 목록 태그를 작동하는 방법을 자세히 설명합니다. it

먼저 대략적인 구현 아이디어를 알려드리겠습니다. 자세한 소개는 아래를 참고해주세요.

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

선택 옵션에 항목 추가

선택 옵션에서 항목 삭제

선택 옵션에서 항목 삭제 the select

select 옵션에서 value="paraValue"의 텍스트를 "paraText"로 수정

select에서 text="paraText"인 첫 번째 항목이 선택되도록 설정

항목 설정 select에서 value="paraValue"를 사용하여 선택하려면

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

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

현재 선택된 항목의 인덱스를 가져옵니다. select 항목

select 항목 지우기

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. 선택 옵션의 값을 수정합니다 = "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. 첫 번째 항목을 text=로 설정합니다. select에서 "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. select에서 값을 설정 "paraValue" 항목이 선택됨

document.all.objSelect.value = objItemValue;

// 8. 값을 가져옵니다. of the current selected item of select

var currSelectValue = document.all.objSelect.value;

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

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

// 10. 현재 선택된 항목의 Index 가져오기 the select

var currSelectIndex = document.all.objSelect.selectedIndex;

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

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

위 내용은 JavaScript 작업 html 드롭다운 목록 태그의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!