Explication détaillée de la façon d'ajouter et de supprimer des éléments dans la liste déroulante de sélection à l'aide de JavaScript-js tutoriel-php.cn

Explication détaillée de la façon d'ajouter et de supprimer des éléments dans la liste déroulante de sélection à l'aide de JavaScript

黄舟

Libérer： 2017-03-22 14:46:14

original

2869 Les gens l'ont consulté

Cet article présente principalement la méthode JavaScript pour ajouter et supprimer des éléments dans la liste déroulante de sélection, impliquant les méthodes append() et remove() dans jQuery pour faire fonctionner dynamiquement les éléments de formulaire, qui sont obligatoire Les amis peuvent se référer à

Cet article décrit comment ajouter et supprimer des éléments dans la liste déroulante de sélection à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1 Instructions

A. Utilisez la méthode append() pour ajouter des éléments au drop-. vers le bas

b. Utilisez la méthode remove() pour supprimer le dernier élément de la liste déroulante

2. Exemple de code source :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript向select下拉框中添加和删除元素</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
   /**
    * 向select下拉框中添加子元素
    */
   function addElement()
   {
     //保证不重复添加
     $("#select_p").empty();
     //添加子元素
     $("#select_p").append("<option value=&#39;0&#39;>---请选择---</option>
     <option value=&#39;1&#39;>男</option><option value=&#39;2&#39;>女</option>");
   }
   /**
   * 删除下拉框中最后一个元素
   */
   function removeLast()
   {
     //删除最后一个子元素
     $("#select_p option:last").remove();
   }
</script>
</head>
<body>
</body>
  <p id="select_span">
     <select id="select_p" style="width:145px;">
     </select>
  </p>
  <input type="button" value="添加元素" onclick="addElement()"/>
  <input type="button" value="删除元素" onclick="removeLast()"/>
</html>

Copier après la connexion

3. Résultat de l'implémentation

(1) Lors de l'initialisation