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

Posted 2023-05-07

【中文标题】用于单选的所选插件的占位符文本不起作用

【英文标题】：placeholder text for chosen plugin for single select not working

【发布时间】：2013-12-10 15:01:02

【问题描述】：

我在我的代码中实现了单选插件。我正在尝试为搜索框添加占位符文本，但我不能。我尝试了以下方法：

<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"，但这也无济于事。有人可以告诉我我错过了什么吗？

提前致谢。

【问题讨论】：

占位符文本？您的意思是在第一个仅提供信息的<option> 标记上添加disabled 属性，因此无法在下拉列表中选择它？

是的，完全正确。表单框中突出显示的文本。

【参考方案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>

【参考方案2】：

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

【讨论】：

这应该是公认的答案！它直截了当，更易于配置！

【参考方案3】：

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

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

* 编辑 *

抱歉，一开始没有清楚地阅读您的问题。

显然第一个<option> 必须是空的。见this jsfiddle。

【讨论】：

这听起来绝对是一个选项......但我更喜欢使用选择提供的占位符文本功能。看看这个链接harvesthq.github.io/chosen/options.html

@tOmppa- 我想通了 :) 但我无法回答自己的问题 :(。对于多选框，我们不必将第一个选项保留为空白。

过了一天你就可以回答了，我相信。

【参考方案4】：

用户回复@Zack Joerdan 解决了我的问题。 所以选项里面的spring需要值

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

【参考方案5】：

如果您通过 HTML 而不是 JS 构建，实际上有一个更好/更简单的解决方案来解决这个问题。你必须做两件事。

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

所以，总共：

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

【参考方案6】：

您只需添加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>

【参考方案7】：

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

在 select 上添加 data-placeholder 属性并确保第一个选项为空。