Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Analyse der Auswahl von JQuery-Operationen

Eine kurze Analyse der Auswahl von JQuery-Operationen

高洛峰
高洛峰Original
2016-12-28 09:57:02910Durchsuche

Werfen Sie ohne weitere Umschweife einen Blick auf den Code:

<select id="Select1">
  <option value="one">一</option>
  <option value="two">二</option>
  <option value="thr">三</option>
  <option value="tho">四</option>
</select>

Kommentare:

(1) Weisen Sie dem Dropdown-Feld einen Wert zu: $("#Select1 ").val("二" ); Zu diesem Zeitpunkt wurde die Option mit dem Wert zwei ausgewählt. Sie können den Index zu diesem Zeitpunkt über $("#Select1")[0].selectedIndex oder $( auf 1 setzen "#Select1").get(0).selectedIndex. Der Index der Dropdown-Box beginnt bei 0

(2) Sie können die Auswahl auch festlegen, indem Sie das Attribut $("#Select1 option[ value='two']").attr('selected',true); Tatsächlich entspricht dies der Zuweisung von

(3), um den Text zu erhalten, der dem ausgewählten Wert entspricht:

1. Nach Wert abrufen: $("#Select1 option[value='" + value + "'] ").text() oder $("#Select1").find("option[value='" + value + "']").text()

2. Erhalten Sie über den ausgewählten Status: $ ("#Select1").find("option:selected").text()

(4) Kaskade von Dropdown-Feldern:

Oft wird die Auswahlkaskade verwendet, d. h. der Wert der zweiten Auswahl ändert sich mit dem Wert, der von der ersten Auswahl ausgewählt wurde. Dies ist in jQuery sehr einfach.

Zum Beispiel: $(".selector1").change(function(){

// Zuerst die zweite löschen

$(".selector2"). empty ();

// In tatsächlichen Anwendungen werden hier im Allgemeinen mehrere Optionen mithilfe einer Schleife generiert

var option = $("<option>").val(1).text("pxx");
  $(".selector2").append(option);
  });

(5) Verwenden Sie den Wert des Textes in der Option, um das entsprechende auszuwählen one Der Wert der Option

var count = $("#Select1 option").length;
   for (var i = 0; i < count; i++) {
    if ($("#Select1").get(0).options[i].text == $(this).val()) {
     $("#Select1").get(0).options[i].selected = true;
     break;
    }
   }

Ps: So entfernen Sie führende und nachfolgende Leerzeichen in jquer: $.trim(value);

Das Obige ist der gesamte Inhalt dieses Artikels I Ich hoffe, dass der Inhalt dieses Artikels zum Lernen aller beitragen kann, und ich hoffe auch, dass ich die chinesische PHP-Website unterstützen kann. Weitere Artikel zur Auswahl von JQuery-Operationen finden Sie hier die chinesische PHP-Website!

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