Assigning select list values to array

Question

I have an array initialised in script

var listarray = new Array();

And have a dynamically created select list ---

<select multiple size=6 width=150 style="width:150px" name="ToLB" >
</select>

My question is how to assign all values of select list to the array. Thanks in advance.

can i know how the select list is dynamically created? i suppose when generating the options you can use the array function `push` to fill your array. http://www.w3schools.com/jsref/jsref_push.asp — MarGa, Apr 23 '13 at 08:01
@MarouaGasmi please refrain from referring to w3schools - read why here http://www.w3fools.com/ — Henrik Andersson, Apr 23 '13 at 08:03
@MarouaGasmi here by referring to dynamic creation is by cloning objects from other select list or getting select option from database. — NewBee, Apr 23 '13 at 08:13
@limelights ok I didn't know that. Anyway I just wanted to show him how to use the push method that works for me as well. Thanks anyway — MarGa, Apr 23 '13 at 08:39
Code is a bit of a mess thats why i reffered to what i need by displaying part of the code. I am initialising the array and want to copy element by the selectlist name. — NewBee, Apr 23 '13 at 08:54

score 7 · Accepted Answer · edited Apr 23 '13 at 12:08

You can do this like :

JQuery-

var optionVal = new Array();
    $('select option').each(function() {
            optionVal.push($(this).val());
        });

Javascript-

var x = document.getElementById("mySelect"); 
var optionVal = new Array();
for (i = 0; i < x.length; i++) { 
    optionVal.push(x.options[i].text);
}

This stores all the options in your select box in the array optionVal.

Hope it helps you.

score 6 · Answer 2 · answered Apr 23 '13 at 07:53

6

You can use getElementsByTagName to get all the selectbox as object.

var el = document.getElementsByTagName('select')

And in jQuery you can do it as below.

var arrayOfValues = $("select").map(function() { return this.value; });

answered Apr 23 '13 at 07:53

Dipesh Parmar

27,090
8
61
90

take a look at http://stackoverflow.com/questions/5866169/getting-all-selected-values-of-a-multiple-select-box-when-clicking-on-a-button-u for more – Dipesh Parmar Apr 23 '13 at 07:55

Henrik Andersson · Answer 3 · 2018-09-02T05:09:26.913

Using plain javascript this is something that would work for you. Now, I've assumed that you have at least some options in your select

html

<select id="selecty" multiple size=6 width=150 style="width:150px" name="ToLB" >
    <option value="monkey">Monkey</option>
</select>

javascript

var listarray = new Array();
//NOTE: Here you used new as a variable name. New is a reserved keyword so you cant use that as a variable name.

var select = document.getElementById('selecty'); // get the select list

for(var i = 0; i < select.options.length; i++){
   listarray.push(select.options[i].value);
}
console.log(listarray);
>> ["monkey"]

Fiddle here:

http://jsfiddle.net/mQH7P/

PilgrimViis · Answer 4 · 2013-04-23T08:24:01.223

<html>
<body>
<!--  Any list (The main thing that it was built before the launch of the functions of the script) -->
<select id = "mySelect" multiple size=6 width=150 style="width:150px" name="ToLB" >
    <option value="1111"></option>
    <option value="12"> </option>
    <option value="123"></option>
</select>
<script>
        var valuesList = new Array(); 
        var mySelect = document.getElementById("mySelect"); 
        var currentOption = mySelect.childNodes; 
        for (var i=1; i<currentOption.length; i = i+2) { // i+2 needed in order to pass text nodes
            valuesList[i-1]=currentOption[i].value;
        }
</script>
</body>
</html>

The values will be stored in your array. I hope I understand you correctly.

Assigning select list values to array

4 Answers4

html

javascript

Linked