Beispielanalyse der Javascript-Operation select element_javascript skills-js-Tutorial-php.cn

Beispielanalyse der Javascript-Operation select element_javascript skills

WBOY

Freigeben： 2016-05-16 16:07:17

Original

977 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Verwendung von Javascript zur Bedienung des Select-Elements. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Machen wir uns hier mit der Funktionsweise von js für das Select-Element vertraut. Erstellen Sie ein Formular auf der HTML-Seite, das ein Select-Element und eine Senden-Schaltfläche enthält.

Ändern Sie den Text, wenn ein Element in der Auswahl ausgewählt wird, und stellen Sie ihn wieder her, nachdem der Text aller Elemente in der Auswahl geändert wurde.

Schließen Sie das Fenster selbst, wenn Sie auf „Senden“ klicken. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

In Firefox schien es zunächst, dass das Fenster selbst nicht geschlossen werden konnte. Später stellte ich fest, dass die Einstellung dom.allow_scripts_to_close_windows in about:config auf true gesetzt werden kann.

Wenn sich die Optionen in jeder Auswahl unregelmäßig ändern, können Sie ein on_change_ex schreiben, um damit umzugehen. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.