how do I show all the selected options in the text field

Question

how do I get my javascript to show more than one selected in de text field I am planning on adding way more 's so I don't want to make a insane long array

function myFunction() {
    var skilllist = document.getElementById("skilllist");
    console.log(skilllist.selectedIndex);
    document.getElementById("skillfield").value = skilllist.options[skilllist.selectedIndex].text;
}

   


		<form>
Select your favorite browser:
	<select name="skillist[]" id="skilllist"  multiple>
		  <option value="HTML">HTML</option>
		  <option value="CSS">CSS</option>
		  <option value="Javascript">Javascript</option>  
		  <option value="PHP">PHP</option>
		  <option value="Laravel">Laravel</option>
		  <option value="Wordpress">wordpress</option>
	</select>
<p>jouw skills zijn: <input type="text" id="skillfield" size="50"></p>
</form>


		</div>

		
 

Answer 1

I suggest adding an event handler on blur event to the select element.
With such an approach you are able to select one or more list items and dynamically render their text content.

document.getElementById("skilllist").addEventListener('blur', function(e){

   var options = e.target.options,
       selected_content = "";

   for (var i = 0; i < options.length; i++) {
       if (options[i].selected) selected_content += options[i].textContent + ", ";
   }    

   document.getElementById("skillfield").value = selected_content;

});

https://jsfiddle.net/zLyw7vhd/

For mobile devices : try to replace event name 'blur' to 'focusout' (or 'change') in addEventListener function