Question

我们的客户希望在所有时间显示占位符（在使用jQuery Chosen的多选中） - 即使已经进行了一次或多次选择。他们的目的是明确表示可以根据需要做出许多其他选择。

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

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

但我找不到修改行为的方法，以便在做出选择后仍然显示占位符。

环境是这样的，我们使用选择;它是组件的一部分。我们仅限于添加其他JavaScript或CSS来改变工作方式。

有没有办法让占位符显示多选选择字段，以鼓励用户做出其他选择？

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

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

以下是一种方法：

＆＃13;

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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

}）;

jQuery Chosen - 随时显示占位符

1 个答案: