Heim > Artikel > Web-Frontend > Beispielanalyse der Javascript-Operation select element_javascript skills

Beispielanalyse der Javascript-Operation select element_javascript skills

WBOYOriginal: 2016-05-16 16:07:17919Durchsuche

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>

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-Verpackungsobjektinstanzanalyse_Javascript-KenntnisseNächster Artikel：JavaScript-Verpackungsobjektinstanzanalyse_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen