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

Question

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

所以这是我在 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，我想从下拉列表中获取用户已 select 编辑的选项列表。所以我在 php 文件中有以下内容以获取 selected 选项。

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

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

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

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

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

javascript

php

drop-down-menu