如何使用JavaScript在下拉列表中获取所有选定的选项？

Question

I have a drop down list, and user can select multi options.

So this is part of my code in firtfile.inc

            <div class="col-md-8">
                <!-- Change report heading so we can grab it on the 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 over the 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 over search criteria
      ?>
                    </select>
    <!-- Hidden heading field for search report -->
                    <input type="hidden" name="Heading" valtue="" />

                </div>

in another php file, I have included firstfile.inc, and i want to get the list of options that user has selected from drop down list. so I have the folloing in the php file to get the selected options.

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

but it only gives me the first option that the user has selected, but I need all of them. How can I get them?

Answer 1

First of all, I highly recommend that you use jQuery , it will make any DOM manipulation a lot easier.

It's not clear what output you expect, but supposing you're expecting a comma separated string like:

Criteria1, Criteria2, Criteria3

You could:

1) Just use PHP to give you that, with something like:

$SearchIn = $_POST["SearchIn"];

$selectedArr = array();
foreach($SearchCriteria as $item) {
    if (in_array($item["value"], $SearchIn)) {
        $selectedArr[] = $item["display"];
    }
}

$criteria = implode(", ", $selectedArr); // will contain: Criteria1, Criteria2, Criteria3

2) If you want to do it on the client and store the values in <input id="heading"/> , you can use jQuery and do this (your HTML would change a little, to include the IDs):

<form action="index.php" method="POST">
    <div class="col-md-8">
        <!-- Change report heading so we can grab it on the 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 for 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) For a pure JavaScript solution (use the same HTML as above):

<script>
document.getElementById("section").onchange=function(){
    selectedArray = new Array();
    for (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>