Question

我正在使用所选的多重选择。我尝试使用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填充。

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

Answer 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;
}

Answer 3

对我来说，它与

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

Answer 4

对我来说，这是@Josep的答案+这些行

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

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

4 个答案: