Comment javascript fonctionne-t-il dans la liste déroulante HTML tags_javascript skills

Permettez-moi d'abord de vous parler 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

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

Supprimer un élément parmi les options sélectionnées

Supprimer l'élément sélectionné dans la sélection

Modifiez le texte de value="paraValue" dans l'option de sélection en "paraText"

Définissez le premier élément avec text="paraText" dans la sélection pour qu'il soit sélectionné

Définissez l'élément avec value="paraValue" dans select pour qu'il soit 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 la sélection

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

Effacer les éléments sélectionnés

code js

// 1. Déterminez s'il existe un élément avec Value="paraValue" dans 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;    
}

// 2. Ajouter un élément à 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("成功加入");   
  }    
} 

// 3. Supprimer un élément de l'option de 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中 不存在该项");    
  }    
}

// 4. Supprimez l'élément sélectionné dans 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. Modifiez le texte de value="paraValue" dans l'option de sélection en "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. Définissez le premier élément avec text="paraText" dans la sélection pour qu'il soit 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中 不存在该项");    
  }    
}

/// 7. Définissez l'élément avec value="paraValue" dans la sélection pour qu'il soit sélectionné

document.all.objSelect.value = objItemValue;   

/// 8. Obtenez la valeur de l'élément actuellement sélectionné de la sélection

var currSelectValue = document.all.objSelect.value;

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

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

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

var currSelectIndex = document.all.objSelect.selectedIndex; 

// 11. Effacer les éléments sélectionnés

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

Le contenu ci-dessus présente la méthode d'utilisation de javascript pour utiliser les balises de liste déroulante HTML. J'espère que tout le monde appréciera cet article.