多选插件中的占位符文本不起作用

Placeholder text in chosen plugin for multiple select not working

本文关键字：占位符 文本 不起作用 插件      更新时间：2023-09-26

我正在使用选定的多项选择。我正在尝试为带有 data-placeholder 属性的选择添加占位符文本，但它不能完全起作用。

只有在对选择输入执行单击然后退出后，才会显示占位符。

我试图按照这篇文章中单选的建议在选择中放置一个空选项，但它不起作用。

有人有解决方案吗？

这是我的代码

<select id="mySelect" data-placeholder="Choose an option ..." class="chosen-select allow_additem item_to_upper" multiple tabindex="4">
</select>

选择充满了javascript。

由于您不发布代码，因此很难猜出答案。但是，如果您希望在下拉菜单中显示"占位符"，则有一种简单的方法可以实现此目的。只需添加一个禁用所选的选项。这样，您显然无法选择此选项，但它将显示为第一个元素。+ 样式以隐藏它;)

<select>
  <option selected disabled style="display:none">Chose your destiny</option>
  <option value="1">Happiness</option>
  <option value="2">Glory</option>
  <option value="3">Wisdom</option>
</select>

编辑：添加了style="display:none"

我知道这有点欺骗，可能不是完美的解决方案，但它确实可以解决问题。我没有使用过data-placeholder，所以我不知道如何使用它来解决您的问题，但我希望这为您提供理想的替代方案。

这是一个选定的项目错误。当你实例化一个选择的元素时，这会在你的 DOM 中创建一个结构，如下所示：

<div class="chosen-container chosen-container-multi" style="width: 100%;" title="" id="mySelect_chosen">
  <ul class="chosen-choices">
    <li class="search-field">
      <input type="text" value="Choose an option ..." class="default" autocomplete="off" style="width: 90px;" tabindex="-1">
    </li>
  </ul>
  <div class="chosen-drop">
    <ul class="chosen-results"></ul>
  </div>
</div>

占位符被放入输入值，固定宽度为 90px。要解决此问题，我建议您将其放入css资产中：

li.search-field input.default {
  width: 100% !important;
}
对我来说，

它适用于

li.search-field input.default {
  width: 100% !important;
  color: #000 !important;
}
对我来说

，这是@Josep的答案+这些行

    .chosen-container-multi .chosen-choices .search-field{
        width: 100%;
    }
相关文章：