Explication détaillée d'exemples de balises de liste déroulante HTML d'opération JavaScript

Les listes déroulantes sont souvent rencontrées dans le développement front-end de sites Web. Comment utiliser la balise de liste déroulante HTML Cet article expliquera en détail comment utiliser la balise de liste déroulante HTML avec Javascript. il peut s'y référer.

Donnez-le d'abord. Parlons de l'idée générale de mise en œuvre. Veuillez voir ci-dessous pour le contenu spécifique.

Déterminez s'il existe un élément avec Value="paraValue" dans l'option de sélection

Ajoutez un élément à l'option de sélection

Supprimer un élément de l'option de sélection

Supprimer l'élément sélectionné dans l'option de sélection

Modifier la valeur=" paraValue" dans le texte de l'option de sélection est "paraText"

Définissez le premier élément avec text="paraText" dans la sélection à sélectionner

Définir la valeur=" dans la sélection L'élément de paraValue" est sélectionné

Obtenir la valeur de l'élément actuellement sélectionné de la sélection

Obtenir le texte de l'élément actuellement sélectionné de select

Obtenir l'index de l'élément actuellement sélectionné de select

Effacer l'élément sélectionné

code js

// 1. Déterminez s'il existe un élément avec Value="paraValue" dans l'option de sélection 🎜>/. / 2. Ajouter un élément à l'option de sélection

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. Supprimer un élément de l'option de sélection

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. Supprimez l'élément sélectionné dans la sélection

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. Modifiez le texte de value="paraValue" dans l'option de sélection en "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. Définissez le premier élément avec text="paraText" dans la sélection à sélectionner

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. Définissez la valeur dans le select L'élément de "paraValue" est sélectionné

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. Obtenez la valeur de l'élément actuellement sélectionné de select

document.all.objSelect.value = objItemValue;

// 9. Obtenez le texte de l'élément actuellement sélectionné de select

var currSelectValue = document.all.objSelect.value;

///10. Obtenez l'index de l'élément actuellement sélectionné de select

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

/ / 11. Effacer l'élément sélectionné

var currSelectIndex = document.all.objSelect.selectedIndex;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!