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>需要是空的{{1}}。请参阅this jsfiddle。

Answer 4

如果您通过HTML而不是JS构建，实际上有更好/更容易解决此问题的方法。你必须做两件事。

<option>中的第一个<select>应为空。
您应在placeholder="Placeholder goes here"中添加<select>。显然这曾被称为data-placeholder，我认为这导致了一些混乱。

所以，总的来说：

<select placeholder="Placeholder goes here">
    <option><!-- Empty option goes here. --><option>
    <option>Other Option</option>
</select>

Answer 5

您只需添加data-placeholder="YOUR TEXT"即可，而无需使用jquery

以下是示例

<select id="search_pi"  data-placeholder="Select Project/Initiative..." name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" >
              <?php
                include "../includes/search_dropdown.php";
                foreach($proj_ini_Array as $qa){
                  echo "<option value = \"$qa\">$qa</option>";
                }
              ?>
</select>

Answer 6

        <select data-placeholder="Select language" class="chosen-select">
            <option></option>
            <option>English</option>
            <option>Urdu</option>
            <option>Hindi</option>
            <option>Chinese</option>
        </select>

在选择上添加数据占位符属性并确保第一个选项为空。

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

6 个答案: