Igor Simic
4 years ago

How to get all selected values from multiple select box


In order to get all selected options from multiple select box we have to create custom function which will be triggered on change event.

So first we will create JS function to get all multiple select values:

function getMultipleSelected(fieldID){
 
           // fieldID is id set on select field

            // get the select element
            var elements = document.getElementById(fieldID).childNodes; 

           // if we want to use key=>value of selected element we will set this object
            var selectedKeyValue = {};
   
           // if we want to use only array of selected values we will set this array
            var arrayOfSelecedIDs=[];
 
           // loop over option values
            for(i=0;i<elements.length;i++){
 
              // if option is select then push it to object or array
              if(elements[i].selected){
               //push it to object as selected key->value 
               selectedKeyValue[elements[i].value]=elements[i].textContent;
               //push to array of selected values
               arrayOfSelecedIDs.push(elements[i].value)

              }
              
            }
            
            // output or do seomething else with these values :)

            console.log(selectedKeyValue);

            console.log(arrayOfSelecedIDs);
             
        }

And here we will create HTML select element calling this function

<select onchange="getMultipleSelected(this.id)" multiple="multiple" name="languages[]" id="languages">
     
     <option value="1">Afrikaans</option>
     <option value="2">Albanian</option>
     <option value="3">Amerindian</option>
     <option value="4">Arabic</option>
     <option value="5">Armenian</option>
     <option value="6">Bahasa Indonesia</option>

</select>