Passez en boucle avec < sélectionnez > et créez un tableau au format: & # 8220; Valeur1 & # 8221;, & # 8220; Valeur2 & # 8221;, & # 8220; Valeur3 & # 8221;

Question

Je me demande si quelqu'un pourrait suggérer le meilleur moyen de parcourir en boucle tous les < options > dans un élément < select > avec jQuery et de construire un tableau .

Par exemple

Au lieu de ce qui suit, dans lequel une chaîne ins est passée à autoCompleteArray (),

$("#CityLocal").autocompleteArray(
        [
            "Aberdeen", "Ada", "Adamsville", "Zoar" //and a million other cities...
        ],
        {
            delay:10,
            minChars:1,
            matchSubset:1,
            onItemSelect:selectItem,
            onFindValue:findValue,
            autoFill:true,
            maxItemsToShow:10
        }
    );

... je dois parcourir tous les < options > d'un < sélectionner > et les insérer dans un tableau, puis simplement transmettre cette variable de tableau à la fonction au lieu d'une longue chaîne.

Par exemple,

$("#CityLocal").autocompleteArray(
            [
                MyBigArrayOfOptions
            ],
            {
                delay:10,
                minChars:1,
                matchSubset:1,
                onItemSelect:selectItem,
                onFindValue:findValue,
                autoFill:true,
                maxItemsToShow:10
            }
        );

Je vous serais reconnaissant de suggérer comment insérer des éléments dans un tableau au format correct. J'ai pratiquement discuté de la partie en boucle d'un autre article sur ce site.

Merci.

Answer 1

Cela devrait fonctionner:

$(document).ready(function(){
  // array of option elements' values
  var optionValues = [];
  // array of option elements' text
  var optionTexts = [];

  // iterate through all option elements
  $('#sel > option').each(function() {
    // get value/text and push it into respective array
    optionValues.push($(this).val());
    optionTexts.push($(this).text());
  });

  // test with alert
  alert(optionValues);
  alert(optionTexts);
});

Étant donné que votre élément select a l'ID sel .

Answer 2

La fonction jQuery.map est peut-être ce que vous recherchez . Le code ci-dessous crée un tableau contenant toutes les valeurs ou valeurs de texte des options < select > .

var values = jQuery.map(jQuery("#select")[0].options, function(option)
             {
                return option.value;
             });

var texts = jQuery.map(jQuery("#select")[0].options, function(option)
            {
                return option.innerHTML;
            });

Answer 3

Tout ce que vous avez à faire est de passer le tableau en tant que premier paramètre sans les crochets. Les crochets créent un nouveau tableau, mais vous n’avez pas besoin de le faire car vous passez déjà un tableau. Il suffit de faire:

$("#CityLocal").autocompleteArray(
                MyBigArrayOfOptions,
                {
                        delay:10,
                        minChars:1,
                        matchSubset:1,
                        onItemSelect:selectItem,
                        onFindValue:findValue,
                        autoFill:true,
                        maxItemsToShow:10
                }
        );

Answer 4

Si je comprends bien votre question, le code suivant devrait faire ce dont vous avez besoin:

myFunction($("#my-select option"));

Le résultat de la requête est déjà un tableau d'options qui sont les descendants de la sélection, vous n'avez donc pas besoin de les insérer dans un autre tableau. Sinon, si votre sélection n'a pas d'identifiant mais que vous avez l'élément DOM:

myFunction($("option", theSelect));

Rebranchez cette idée dans votre code:

$("#CityLocal").autocompleteArray(
    $("option", theSelect),
    {
            delay:10,
            minChars:1,
            matchSubset:1,
            onItemSelect:selectItem,
            onFindValue:findValue,
            autoFill:true,
            maxItemsToShow:10
    }
);