Loop through <select> and build array in the format: "value1","value2","value3"...

Question

I wonder if anyone could suggest the best way of looping through all the <option> s in a <select> element with jQuery, and building an array.

Eg.

Instead of the following, whereby a string ins passed to the 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
     }
    );

...I need to loop through all the <options> in a <select> and push them into an array, and just pass that array variable to the function instead of a long string.

Eg,

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

I'd be grateful if you could suggest how to push stuff into an array in the correct format. I've pretty much sussed the looping part from another post on this site.

Thanks.

Answer 1

This should work:

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

Given that your select element has ID sel.

Answer 2

The jQuery.map function might be what you're looking for. The code below will create an array that contains all of the values or text values for the <select> options.

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

All you need to do is pass the array as the first parameter without the brackets. Brackets create a new array, but you don't need to do that because you are already passing an array. Just do:

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

Answer 4

If I understand your question corrently, the following code should do what you need:

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

The output of the query is already an array of options that are descendants of the select, so you don't need to push them into another array. Alternatively, if your select doesn't have an id, but you have the DOM element:

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

Plugging this idea back into your code:

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