php - How to get all the selected options in a drop down list with JavaScript? -

i have drop down list, , user can select multi options.

so part of code in firtfile.inc

            <div class="col-md-8">                 <!-- change report heading can grab on report page -->                     <select name="searchin[]" multiple="multiple"  onchange="javascript:this.form.heading.value=this.options[this.selectedindex].text;" required="required" title="section">                      <option value="" disabled selected>select</option>                     <?php //loop on options   for($i=0;$i<sizeof($searchcriteria);$i++){   ?>          <option value="<?php echo $searchcriteria[$i]['value'];?>"<?php if($searchcriteria[$i]['value']=='facultyname'){echo ' selected="selected"';}?>>         <?php echo $searchcriteria[$i]['display'];?>         </option>    <?php      }//!end of looping on search criteria       ?>                     </select>     <!-- hidden heading field search report -->                     <input type="hidden" name="heading" valtue="" />                  </div> 

in php file, have included firstfile.inc, , want list of options user has selected drop down list. have folloing in php file selected options.

  $heading = $dat->if_default('heading', ''); 

but gives me first option user has selected, need of them. how can them?

first of all, highly recommend use jquery, make dom manipulation lot easier.

it's not clear output expect, supposing you're expecting comma separated string like:

criteria1, criteria2, criteria3 

you could:

1) use php give that, like:

$searchin = $_post["searchin"];  $selectedarr = array(); foreach($searchcriteria $item) {     if (in_array($item["value"], $searchin)) {         $selectedarr[] = $item["display"];     } }  $criteria = implode(", ", $selectedarr); // contain: criteria1, criteria2, criteria3 

2) if want on client , store values in <input id="heading"/>, can use jquery , (your html change little, include ids):

<form action="index.php" method="post">     <div class="col-md-8">         <!-- change report heading can grab on report page -->         <select id="section" name="searchin[]" multiple="multiple" required="required" title="section">             <option value="" disabled selected>select</option>             <?php for($i = 0; $i < sizeof($searchcriteria); $i++) { ?>             <option value="<?php echo $searchcriteria[$i]['value'];?>"<?php if($searchcriteria[$i]['value']=='facultyname'){echo ' selected="selected"';}?>>                 <?php echo $searchcriteria[$i]['display'];?>             </option>             <?php } ?>         </select>         <!-- hidden heading field search report -->         <input id="heading" type="hidden" name="heading" value="" />     </div>     <input type="submit"> </form>  <script> $('#section').on("change", function() {     selectedarray = new array();     $(this).find("option:selected:not([disabled])").each(function() {         selectedarray.push(this.text);     });     $("#heading").val(selectedarray.join(", ")); }); </script> 

3) pure javascript solution (use same html above):

<script> document.getelementbyid("section").onchange=function(){     selectedarray = new array();     (x = 0; x < this.length; x++) {         if (this[x].selected && !this[x].disabled) {             selectedarray.push(this[x].text);         }     }     document.getelementbyid("heading").value = selectedarray.join(", "); }; </script>