所选插件的占位符文本,用于单个选择不起作用

Question

我在我的代码中实现了单选的插件选择.我正在尝试为搜索框添加占位符文本,但我无法.我试过以下的事情:

<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"但这也无济于事.有人可以让我知道我错过了什么吗？

提前致谢.

Answer 1

好的.我找到了答案.我们需要将第一个选项设置为空白,以便为单选搜索框激活占位符文本.

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

Answer 2

data-placeholder="YOUR TEXT"在select标签中使用

Answer 3

要使您的第一个选项只是一个指导文本，但用户无法选择它，请使用以下命令：

<option selected="selected" disabled>Search Project/Initiative...</option>

* 编辑 *

啊抱歉，开始时没有足够清楚地阅读您的问题。

显然第一个<option>需要是一个空的。看到这个 jsfiddle。