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

【问题标题】：How to get all the selected options in a drop down list with JavaScript?如何使用 JavaScript 在下拉列表中获取所有选定的选项？
【发布时间】：2015-11-22 02:17:08
【问题描述】：

我有一个下拉列表，用户可以选择多个选项。

所以这是我在 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>

在另一个 php 文件中，我包含了 firstfile.inc，我想获取用户从下拉列表中选择的选项列表。所以我在 php 文件中有以下内容来获取选定的选项。

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

但它只给了我用户选择的第一个选项，但我需要所有这些选项。我怎样才能得到它们？

【问题讨论】：

标签： javascript php drop-down-menu

【解决方案1】：

首先，我强烈推荐你使用jQuery，它会让任何DOM操作变得容易很多。

不清楚您期望什么输出，但假设您期望一个逗号分隔的字符串，例如：

Criteria1, Criteria2, Criteria3

你可以：

1) 只需使用 PHP 来为您提供，例如：

$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) 如果您想在客户端执行此操作并将值存储在<input id="heading"/>，您可以使用 jQuery 并执行此操作（您的 HTML 会稍作更改，以包含 ID）：

<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) 对于纯 JavaScript 解决方案（使用与上述相同的 HTML）：

<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>

【讨论】：