Ausführliche Erläuterung von Beispielen für HTML-Dropdown-Listen-Tags für JavaScript-Operationen

Dropdown-Listen werden häufig bei der Website-Frontend-Entwicklung verwendet. In diesem Artikel wird ausführlich erläutert, wie Sie das HTML-Dropdown-Listen-Tag mit Javascript bedienen es kann sich darauf beziehen.

Geben Sie es zuerst. Lassen Sie uns über die allgemeine Implementierungsidee sprechen. Den spezifischen Inhalt finden Sie weiter unten.

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

Fügen Sie ein Element zur Auswahloption hinzu

Ein Element aus der Auswahloption löschen

Das ausgewählte Element aus der Auswahloption löschen

Wert ändern=" paraValue“ im Auswahloptionstext ist „paraText“

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

Set value=" in the select Das Element von paraValue" ist ausgewählt

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

Get den Text des aktuell ausgewählten Elements von select

Index des aktuell ausgewählten Elements von select abrufen

Ausgewähltes Element löschen

js-Code

// 1. Bestimmen Sie, ob in der Auswahloption ein Element mit Value="paraValue" vorhanden ist. / 2. Ein Element zur Auswahloption hinzufügen

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;    
}

// 3. Ein Element aus der Auswahloption löschen

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

// 4. Löschen Sie das ausgewählte Element in select

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中 不存在该项");    
  }    
}

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

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;  
    }  
  }  
}

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

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中 不存在该项");    
  }    
}

// 7. Legen Sie den Wert fest the select Das Element von „paraValue“ ist ausgewählt

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中 不存在该项");    
  }    
}

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

document.all.objSelect.value = objItemValue;

// 9. Holen Sie sich den Text des aktuell ausgewählten Elements von select

var currSelectValue = document.all.objSelect.value;

///10. Rufen Sie den Index des aktuell ausgewählten Elements ab

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

/ / 11. Löschen Sie das ausgewählte Element

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für HTML-Dropdown-Listen-Tags für JavaScript-Operationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!