javascript - 单选的所选插件的占位符文本不起作用

我在代码中实现了用于单选的所选插件。我正在尝试为搜索框添加占位符文本，但无法这样做。我尝试了以下操作:

<select id="search_pi" name="search_pi" type="text" class="chosen-select"
        style="width:450px;" onchange="this.form.submit()" >

  <option value="">Search Project/Initiative...</option>
  <?php
    include "../includes/search_dropdown.php";
    foreach($proj_ini_Array as $qa){
      echo "<option value = \"$qa\">$qa</option>";
    }
  ?>

JS

<script>
  $(document).ready(function() {
    $('.chosen-select').chosen({
      placeholder_text_single: "Select an option",
      no_results_text: "Oops, nothing found!"
    });
  });
</script>

在选择字段中，我也尝试使用data-placeholder="Select an option"，但这也无济于事。有人可以让我知道我在想什么吗？

提前致谢。

最佳答案

好的。我找到了答案。我们需要将第一个选项留为空白，以激活用于单选搜索框的占位符文本。

<select id="search_pi" name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" >

  <option> </option>
  <?php
    include "../includes/search_dropdown.php";
    foreach($proj_ini_Array as $qa){
      echo "<option value = \"$qa\">$qa</option>";
    }
  ?>

在上述情况下，占位符文本将默认为“选择选项”。

对于单个搜索选择框的自定义占位符文本，您可以按以下方式编辑js文件，并将要显示的占位符文本的第一个选项留为空白:

<script>
  $(document).ready(function() {
    $('.chosen-select').chosen({
      placeholder_text_single: "Select Project/Initiative...",
      no_results_text: "Oops, nothing found!"
    });
  });
</script>