Geek Answers Handbook

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

I wonder if anyone can suggest a better way to iterate over all the <option> elements in a <select> element with jQuery and build an array.

Eg.

Instead of the following, causing the string ins to be passed to 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 skip all the <options> in the <select> and insert them into the array and just pass this array variable to the function instead of a long string.

For instance,

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

I would appreciate if you would suggest how to embed material in an array in the correct format. I put a lot of the loop from another post on this site pretty much.

Thanks.

+4
source share
4 answers

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 an identifier sel.

+8
source

The jQuery.map function may be what you are looking for. The code below will create an array containing all 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; });
+6
source

All you have to do is pass the array as the first parameter without parentheses. The brackets create a new array, but you do not need to do this because you are already passing the array. Just do:

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

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

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

The query output is already a set of parameters that are descendants of the selection, so you do not need to insert them into another array. Also, if your choice does not have an identifier, but you have a DOM element:

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

Including this idea in your code:

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

More articles:


All Articles