Question

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

所以这是我在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', '');

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

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在下拉列表中获取所有选定的选项？

1 个答案: