jQuery 已选择 - 始终显示占位符

Question

我们的客户希望在所有次显示占位符（在使用 jQuery 选择的多个 select 中） - 即使在一次或制造了更多 select 离子。他们的目的是明确表示可以根据需要做出尽可能多的额外选择。

我可以修改占位符的文字：

jQuery(document).ready(function(){
    jQuery("#input_1_4").attr("data-placeholder", "Choose one or more");
});

但我没有找到一种方法来修改行为，以便占位符在做出选择后仍然显示。

环境是这样的，我们必须使用Chosen；它是组件的一部分。我们仅限于添加额外的 JavaScript 或 CSS 来改变工作方式。

有没有办法让占位符显示在 multiselect Chosen 字段中，以鼓励用户做出额外的选择？

更新这是一个工作示例： https://jsfiddle.net/holmegm/efhLepxs/25/

jQuery(document).ready(function(){
    jQuery("#input_1_4").attr("data-placeholder", "Choose one or more");
    jQuery("#input_1_4").chosen();
});

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  width: 25em !important;
}
.chosen-container-multi .chosen-choices {
  width: 25em !important;
  
}

<ul>
<li id="field_1_4"><div class="ginput_container ginput_container_multiselect"><select multiple="multiple" data-placeholder="Click to select..." size="7" name="input_4[]" id="input_1_4"  class="medium gfield_select" tabindex="6"><option value="what" >What</option><option value="sure" >Sure</option><option value="this" >This</option><option value="that" >That</option><option value="theOther" >The Other</option></select></div><div class="gfield_description">Please choose one or more types of assistance that you are looking for.</div></li></ul>

请注意，占位符文本在做出任何选择之前出现，然后不在做出一个或多个选择后出现。目标是让它保持存在，而不仅仅是假设用户已经知道如何使用这种控件的空白 space。

Answer 1

您需要将 data-placeholder 属性的值（或 chosen 条款中的 default_text ）设置到 search_field 元素后的 已选择已初始化。

这是一种方法：

jQuery(document).ready(function() {
  jQuery("#input_1_4").attr("data-placeholder", "Choose one or more");
  jQuery("#input_1_4").on('chosen:ready', function(ev, args) {
    var sender = args.chosen;
    sender.search_field.attr('placeholder', sender.default_text);
  }).chosen();
});

  .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  width: 25em !important;
}

.chosen-container-multi .chosen-choices {
  width: 25em !important;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<ul>
  <li id="field_1_4">
    <div class="ginput_container ginput_container_multiselect"><select multiple="multiple" data-placeholder="Click to select..." size="7" name="input_4[]" id="input_1_4" class="medium gfield_select" tabindex="6"><option value="what" >What</option><option value="sure" >Sure</option><option value="this" >This</option><option value="that" >That</option><option value="theOther" >The Other</option></select></div>
    <div
      class="gfield_description">Please choose one or more types of assistance that you are looking for.</div>
  </li>
</ul>

});

jQuery 已选择 - 始终显示占位符

jQuery Chosen - show placeholder at all times

jquery

jquery-chosen