所选插件中的占位符文本用于多选不起作用答案

【问题标题】：Placeholder text in chosen plugin for multiple select not working所选插件中的占位符文本用于多选不起作用
【发布时间】：2016-01-15 09:53:18
【问题描述】：

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

占位符仅在对选择输入执行单击然后退出后才会出现。

我尝试按照this post 中单选的建议在选择中放置一个空选项，但没有成功。

有人有解决办法吗？

这是我的代码

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

选择是用javascript填充的。

【问题讨论】：

你能做一个jsfiddle吗？ jsfiddle.net

标签： javascript jquery-chosen

【解决方案1】：

由于您没有发布代码，因此很难猜出答案。但是，如果您希望在下拉菜单中显示“占位符”，有一种简单的方法可以实现这一点。只需添加一个带有选定禁用~~的选项。这样你显然不能选择这个选项，但它会显示为第一个元素。~~ + 隐藏它的样式；）

<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，所以我不知道如何用它来解决你的问题，但我希望这能给你一个理想的选择。

【讨论】：

我真的不想将占位符作为选项。单击选择时，我希望占位符消失并显示列表。
我编辑了答案以更好地满足您的要求。
如果它是一个简单的选择元素就完美了。但事实并非如此。我正在为多选元素使用选择的插件。所以当我应用你建议的解决方案时，渲染是完全不同的。
如果你可以在 jsfiddle 上做一个代码示例，它会更容易帮助你。您是否在控制台中看到任何错误。也许仔细检查你的类属性......你能提供更多信息吗？

【解决方案2】：

这是一个选定的项目错误。当你实例化一个选择的元素时，这会在你的 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;
}

【讨论】：

【解决方案3】：

对我来说，它适用于

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

【讨论】：

【解决方案4】：

对我来说，是@Josep's Answer + 这些行

    .chosen-container-multi .chosen-choices .search-field{
        width: 100%;
    }

【讨论】：