<!DOCTYPE html>
<html>
<head>
<title>dropdown_box_multi_select</title>
<style>
select {
font-size:24px;
height:250px;
}
</style>
<script>
// show the associative values
function myFunction(item, index, arr)
{
str += '<p>'+index+' > '+item+'</p>';
}
function showselected()
{
e = document.getElementById('multiSelect');
selected_list_associative = []; // [2] == "Ram" , [3] == "Jeep" use: selected_list_associative.forEach()
selected_list_array = []; // [2,3]
selected_list_text = []; // ["Ram","Jeep"]
for (var i=0; i < e.options.length ; i++) {
if (e.options[i].selected) {
selected_list_associative[i] = e.options[i].text;
selected_list_array.push(i);
selected_list_text.push(e.options[i].text);
}
}
console.log('--------- New Select---------');
console.log(selected_list_associative);
console.log(selected_list_array);
console.log(selected_list_text );
// pass over selected_list_associative
str = "";
selected_list_associative.forEach(myFunction);
document.getElementById('display').innerHTML = str;
}
</script>
</head>
<body>
<form name="selectform" method="post" action="dropdown_box_multi_show.php" align="center">
<h1>Dropdown box multi select</h1>
<h2>Open concol.log to see inside info</h2>
<h2>Make sure you use name="multiSelect[]" in the select</h2>
<select id="multiSelect" name="multiSelect[]" multiple="multiple" onchange="showselected()">
<option selected="" value="*">Please selec (you can select manay)
</option>
<option value="Doge">Doge</option>
<option value="Lincoln">Lincoln</option>
<option value="Ram">Ram</option>
<option value="Jeep">Jeep</option>
<option value="GMC">GMC</option>
<option value="GM">GM</option>
<option value="Ford">Ford</option>
<option value="Buick">Buick</option>
</select>
<div id="display"></div>
</form>
<br>
</body>
</html>
FILE: dropdown_box_multi_show.php
<?php
$multiSelect = $_REQUEST['multiSelect'];
// var_dump($multiSelect);
foreach ($multiSelect as $selectedOption)
echo $selectedOption."\n";
?>