JQuery auswählen Box Manipulation

Kernpunkte

• jQuery bietet eine Vielzahl von Möglichkeiten, um Dropdown-Boxen zu bedienen, einschließlich Hinzufügen, Löschen und Ändern von Optionen mithilfe von Methoden wie append(), remove() und val(). Verwenden Sie unbedingt die Funktion $(), um das Dropdown-Feld auszuwählen, bevor Sie eine Methode anwenden.
• Um den aktuellen Wert der ausgewählten Option zu erhalten, verwenden Sie die Methode val(). Der Text der ausgewählten Option kann unter Verwendung der text() -Methode erhalten werden. Mehrere Werte können mit der Funktion each() abgerufen werden.
• Mit dem Ereignis in jQuery kann die ausgewählten Optionen im Dropdown-Feld identifiziert werden. Dieses Ereignis löst eine Funktion aus, die nach dem Text der ausgewählten Option sucht. onChange

Einführung

Bedienung des Dropdown-Boxs in JQuery erfordert zusätzliche Tricks und Interaktionen, ist jedoch nicht kompliziert. Dieser Artikel hilft Ihnen dabei, den Dropdown-Box-Vorgang einfach zu erledigen.

Erstellen Sie ein Dropdown-Feld

Dies sollte sehr einfach und unkompliziert sein:

jQuery('#some_element').append('');

Aktualisiert am 6. Januar 2011-Drei verschiedene Möglichkeiten zur Auswahl der Dropdown-Box-Option:

// 选择下拉框选项
jQuery('#selectboxid option').attr('selected', true);
jQuery('#selectboxid option').attr('selected', selected);
$("#selectboxid").attr('selectedIndex', indexnumber);

Verwenden Sie JQuery, um die Option Dropdown-Box zu bedienen

Folgendes ist der Code zum Hinzufügen von Optionen zum Dropdown-Feld. Fügen Sie einfach Teile ein und bearbeiten Sie Teile, um Ihren Anforderungen zu entsprechen.

// obj 是选项值列表
function(obj) {
  var create = '';
  for (var i = 0; i < obj.length; i++) {
    create += '<option value="' + obj[i] + '">' + obj[i] + '</option>';
  }
  create += '';
  jQuery('#some_element').append(create);
}

Alternativ können Sie in der Liste der Elemente eine Option erstellen und sie mit reinem jQuery anhängen:

function(id, obj) {
  jQuery('#some_element').append('<select id="' + id + '"></select>');
  jQuery.each(obj, function(val, text) {
    jQuery('#' + id).append(
      jQuery('<option></option>').val(val).html(text)
    );
  });
}

Erhalten Sie den Wert im Dropdown-Feld

Wir müssen möglicherweise den aktuellen Wert der ausgewählten Option kennen.

// #selectbox 是下拉框的 ID
jQuery('#selectbox option:selected').val();

Sie können den Text der Option erhalten von:

// #selectbox 是下拉框的 ID
jQuery('#selectbox option:selected').text();
jQuery('#selectList option[value=\'thisistheone\']').text();
jQuery('#selectList option:first').text();
jQuery('#selectList option:eq(3)').text();
jQuery('#selectList option:not(option:first, option:last)').each(function() {
  jQuery(this).text();
});

Erhalten Sie mehrere Werte im Dropdown-Feld

Verwenden Sie diesen Code, um mehrere Werte abzurufen:

jQuery('#some_element:selected').each(function() {
  alert(jQuery(this).text());
  alert(jQuery(this).val());
});

var current = [];
jQuery('#some_element:selected').each(function(index, selectedObj) {
  current[index] = jQuery(selectedObj).text();
});

var foo = jQuery('#multiple :selected').map(function() {
  return jQuery(this).val();
}).get();

Elemente im Dropdown-Feld löschen

nichts Besonderes hier. Fügen Sie diesen Code einfach ein und ändern Sie ihn, damit Sie das Element Ihrer Wahl löschen können.

jQuery('#selectbox :selected').remove();

// 删除除第一个和最后一个元素之外的所有元素
// #selectbox 是下拉框的 ID
jQuery("#selectbox option:not(option:first, option:last)").remove();

Wählen Sie die Optionen im Dropdown-Feld aus

Tun Sie dies, um eine Option im Dropdown-Feld auszuwählen:

jQuery('#selectbox option').attr('selected', 'selected');

Deaktivierte Option

Umkehrbetrieb des obigen Codes:

jQuery('#selectbox option').attr('selected', false);

OnChange -Ereignis finden ausgewählte Optionen

jQuery('#selectbox').change(function() {
  var val = jQuery(this).find('option:selected').text();
  alert('我选择了：' + val);
});

// onchange 查找下拉框中选定的项目
jQuery('#selectbox').change(function() {
  jQuery(this).find('option:selected').each(function() {
    alert('我选择了：' + jQuery(this).text());
  });
});

Schlussfolgerung

Wenn Sie die Schritte korrekt ausführen, sollten Sie die Aufgabe erledigen können. Wie Sie sehen können, ist es nicht schwierig!

Häufig gestellte Fragen zum Dropdown-Box von JQuery

(Der FAQ -Teil wird hier weggelassen, da sein Inhalt stark vom vorherigen Inhalt dupliziert wird. Um Redundanz zu vermeiden, werde ich ihn hier nicht wiederholen. Der Inhalt des FAQ -Teils kann bei Bedarf wiederhergestellt werden.

Das obige ist der detaillierte Inhalt vonJQuery auswählen Box Manipulation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!