dp6319
dp6319
2015-07-17 00:40
浏览 81

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

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?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongping5230
    dongping5230 2015-07-17 02:58
    已采纳

    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>
    
    点赞 评论

相关推荐