Wie funktioniert Javascript mit HTML-Dropdown-Listen-Tags_Javascript-Kenntnissen?

Lassen Sie mich zunächst die allgemeine Umsetzungsidee erläutern. Den konkreten Inhalt finden Sie weiter unten.

Bestimmen Sie, ob in der Auswahloption ein Artikel mit Value="paraValue" vorhanden ist

Einen Artikel zur Auswahloption hinzufügen

Ein Element aus den Auswahloptionen löschen

Löschen Sie das ausgewählte Element in der Auswahl

Ändern Sie den Text von value="paraValue" in der Auswahloption in "paraText"

Legen Sie das erste Element mit text="paraText" in der Auswahl fest, das ausgewählt werden soll

Legen Sie das Element mit value="paraValue" in select fest, um es auszuwählen

Erhalten Sie den Wert des aktuell ausgewählten Elements von select

Erhalten Sie den Text des aktuell ausgewählten Elements der Auswahl

Rufen Sie den Index des aktuell ausgewählten Elements von

ab

Ausgewählte Elemente löschen

JS-Code

// 1. Bestimmen Sie, ob in der Auswahloption ein Artikel mit Value="paraValue" vorhanden ist

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. Fügen Sie ein Element zur Auswahloption hinzu

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. Löschen Sie ein Element aus der Auswahloption

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. Löschen Sie das ausgewählte Element in select

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. Ändern Sie den Text von value="paraValue" in der Auswahloption in "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. Legen Sie das erste Element mit text="paraText" in der Auswahl fest, das ausgewählt werden soll

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. Legen Sie das Element mit value="paraValue" in der Auswahl fest, das ausgewählt werden soll

document.all.objSelect.value = objItemValue;   

/// 8. Ermitteln Sie den Wert des aktuell ausgewählten Elements von select

var currSelectValue = document.all.objSelect.value;

// 9. Rufen Sie den Text des aktuell ausgewählten Elements ab, indem Sie

auswählen

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

///10. Holen Sie sich den Index des aktuell ausgewählten Elements von select

var currSelectIndex = document.all.objSelect.selectedIndex; 

// 11. Löschen Sie die ausgewählten Elemente

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

Der obige Inhalt stellt die Methode zur Verwendung von Javascript zum Betreiben von HTML-Dropdown-Listen-Tags vor. Ich hoffe, dass dieser Artikel allen gefällt.