JQUERY SELECT BOX Manipulation

Points de base

• jQuery fournit une variété de façons de faire fonctionner des boîtes déroulantes, y compris l'ajout, la suppression et la modification des options à l'aide de méthodes telles que append(), remove() et val(). Assurez-vous d'utiliser la fonction $() pour sélectionner la boîte déroulante avant d'appliquer une méthode.
• Pour obtenir la valeur actuelle de l'option sélectionnée, utilisez la méthode val(). Le texte de l'option sélectionnée peut être obtenu à l'aide de la méthode text(). Plusieurs valeurs peuvent être récupérées à l'aide de la fonction each().
• L'événement onChange dans jQuery peut être utilisé pour identifier les options sélectionnées dans la boîte déroulante. Cet événement déclenche une fonction qui recherche le texte de l'option sélectionnée.

Introduction

Faire fonctionner la boîte déroulante dans jQuery nécessite des astuces et des interactions supplémentaires, mais ce n'est pas compliqué. Cet article vous aidera à gérer facilement le fonctionnement de la boîte déroulante.

Créer une boîte déroulante

Cela devrait être très simple et simple:

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

Mis à jour le 6 janvier 2011 - Trois façons différentes de sélectionner l'option de boîte déroulante:

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

Utilisez jQuery pour faire fonctionner l'option de boîte déroulante

Ce qui suit est le code pour ajouter des options à la boîte déroulante. Collez et modifiez simplement les pièces en fonction de vos besoins.

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

Alternativement, vous pouvez créer une option dans la liste des éléments et la joindre avec Pure jQuery:

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

Obtenez la valeur dans la boîte déroulante

Nous pouvons avoir besoin de connaître la valeur actuelle de l'option sélectionnée.

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

Vous pouvez obtenir le texte de l'option par:

// #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();
});

Obtenez plusieurs valeurs dans la boîte déroulante

Utilisez ce code pour récupérer plusieurs valeurs:

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();

Supprimer les éléments de la boîte déroulante

Rien de spécial ici. Collez simplement ce code et modifiez-le afin que vous puissiez supprimer l'élément de votre choix.

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

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

Sélectionnez des options dans la boîte déroulante

Faites cela pour sélectionner une option dans la boîte déroulante:

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

Option désélectionnée

Fonctionnement inversé du code ci-dessus:

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

événement onChange Trouver des options sélectionnées

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

Conclusion

Si vous suivez correctement les étapes, vous devriez être en mesure de terminer la tâche. Comme vous pouvez le voir, ce n'est pas difficile!

Des questions fréquemment posées sur le fonctionnement de la boîte déroulante JQuery

(La partie FAQ est omise ici parce que son contenu est fortement dupliqué à partir du contenu précédent. Afin d'éviter la redondance, je ne le répéterai pas ici. Le contenu de la partie FAQ peut être régénéré selon les besoins, il suffit de réorganiser les questions et les réponses dans un langage plus concis et plus clair.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!