Exemple d'analyse d'une opération javascript, sélectionnez les compétences element

Exemple d'analyse d'une opération javascript, sélectionnez les compétences element_javascript

WBOY

Libérer： 2016-05-16 16:07:17

original

977 Les gens l'ont consulté

L'exemple de cet article décrit l'utilisation de javascript pour faire fonctionner l'élément select. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Ici, familiarisons-nous avec le fonctionnement de js sur l'élément select. Créez un formulaire dans la page html, qui contient un élément select et un bouton de soumission.

Modifiez le texte lorsqu'un élément de la sélection est sélectionné et restaurez-le une fois le texte de tous les éléments de la sélection modifié.

Fermez la fenêtre elle-même lorsque vous appuyez sur Soumettre. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<title>duang for select elements</title>
<script type="text/javascript">
 function do_change(elt){
  var text = elt[elt.selectedIndex].innerHTML;
  if(!text.match(/\[/))
   elt[elt.selectedIndex].innerHTML += " [duang]";
  var is_all_seleted = true;
  for(var i=0;i<elt.length;++i){
   if(!elt[i].innerHTML.match(/\[/)){
    is_all_seleted = false;
    break;
   }
  }
  if(is_all_seleted){
   alert("all duang!!!\nand reset it!!!");
   for(var i=0;i<elt.length;++i){
    elt[i].innerHTML = elt[i].innerHTML.replace(/\s\[.*\]/,"")
   }
  }
 }
</script>
</head>
<body>
 <form id="frm_main" action="#" method="post">
  <select id="slt" onchange="do_change(this);">
   <option value="opt_1">opt A</option>
   <option value="opt_2">opt B</option>
   <option value="opt_3">opt C</option>
   <option value="opt_4">opt D</option>
   <option value="opt_5">opt E</option>
  </select>
  <input type="submit" value="close window" onclick="window.close();"/>
 </form>
</body>
</html>

Copier après la connexion

Dans Firefox, il semblait que la fenêtre elle-même ne pouvait pas être fermée au début. Plus tard, j'ai découvert que le paramètre dom.allow_scripts_to_close_windows dans about:config pouvait être défini sur true.

Si les options de chaque sélection changent de manière irrégulière, vous pouvez écrire un on_change_ex pour le gérer. Le code est le suivant :

function do_change_ex(me){
  var text = me[me.selectedIndex].innerHTML;
  if(!text.match(/\[/)){
   me[me.selectedIndex].text_bak = me[me.selectedIndex].innerHTML;
   me[me.selectedIndex].innerHTML += " [duang]";
   me[me.selectedIndex].is_changed = true;
  }
  var is_all_seleted = true;
  for(var i=0;i<me.length;++i){
   if(!me[i].is_changed){
    is_all_seleted = false;
    break;
   }
  }
  if(is_all_seleted){
   alert("all duang!!!\nand reset it!!!");
   for(var i=0;i<me.length;++i){
    me[i].innerHTML = me[i].text_bak;
    me[i].is_changed = false;
   }
  }
}

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.