Beispiel für einen ausgewählten JQuery-Selektor

Dieses Tutorial erklärt die Verwendung von ausgewählten Selektor in jQuery. Das ausgewählte Selektorereignis tritt auf, wenn ein Element im Dokument ausgewählt wird. Es entspricht den Elementen des auf einer Seite ausgewählten Typs. Es funktioniert für Optionselemente, die vorab ausgewählt sind. Die vorausgewählte Option wird zuerst in der Dropdown-Liste angezeigt. Der ausgewählten Selektor funktioniert nur für Optionselemente; es funktioniert nicht für Kontrollkästchen und Radiobox; Verwenden Sie für sie stattdessen den aktivierten Selektor, anstatt den ausgewählten Selektor zu verwenden.

JQuery Selected Selector-Syntax

$(“: selected”)

Beispiel für einen ausgewählten JQuery-Selektor

<!doctype html>
<head>
<title>JQuery Selected Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Selected Selector Example</h2>
<style>
   div{
      color:green;
   }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $(":selected").css("background-color","red");
        $("select").change(function(){
          $("div").text($("select option:selected").val()+ " is selected");
        });
   });
</script>
<body>
  <select>
      <option value="bangalore">Bangalore</option>
      <option value="belgaum" selected="selected">Belgaum</option>
      <option value="hubli">Hubli</option>
      <option value="mangalore">Mangalore</option>
      <option value="gulbarga">Gulbarga</option>
</select>
<div></div>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • $(„:selected“).css(„background-color“, „red“); Zeile definiert den ausgewählten Selektor, der das vorab ausgewählte Element auswählt. Das vorausgewählte Element wird in der Dropdown-Liste mit rotem Hintergrund angezeigt.
  • $(„div“).text($(„select option:selected“).val()+ „ist ausgewählt“); Zeile definiert den Wert des ausgewählten Elements mithilfe der Methode val(). Die Methode val() gibt den Wert des Attributs des übereinstimmenden Elements im Dokument zurück.
  • Wenn wir das obige Skript ausführen, erhalten wir eine Dropdown-Liste mit einer Liste von Optionen. Das vorab ausgewählte Element wird mit rotem Hintergrund angezeigt und wenn wir jedes Mal ein anderes Element auswählen, wird das ausgewählte Element mit grüner Farbe angezeigt.

JQuery Selected Selector-Demo

Wenn Sie das oben genannte ausführen Beispielwürden Sie die folgende Ausgabe erhalten:

  • Führen Sie die JQuery Selected Selector-Demo aus

Beispiel für einen ausgewählten JQuery-Selektor

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen