jQuery Chosen - 常にプレースホルダを表示

Question

クライアントは、でプレースホルダ（jQuery Chosenを使用しているマルチセレクト）を表示したい場合は、1つ以上の選択が行われた後でも、回です。彼らの意図は、必要に応じてさらに多くの選択肢を作ることができることを明確にすることです。

私はプレースホルダのテキストを変更することができます

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

しかし、私は選択が行われた後、プレースホルダがまだ表示されるように動作を変更する方法を見つけることではないのです。

私たちがにある場合、Chosenを使用する場合はです。それはコンポーネントの一部です。どのように動作するかを変更するために、JavaScriptやCSSを追加することに限定されています。

マルチセレクションの選択フィールドにプレースホルダを表示する方法はありますか？ユーザーによる追加の選択を促すには？プレースホルダーテキストは、任意の選択が行われる前に存在し、その後、後ない存在していることを 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>

注：

更新 ここでは、実施例であります1つまたは複数の選択肢が作られている。目標は、ユーザーがすでにこの種の制御の使い方を知っていることを前提とした空白の空白だけでなく、それが存在し続けることです。

Answer 1

あなたは選ばれたが初期化された後search_field要素にdata-placeholder属性（または選ばれた面でdefault_text）の値を設定する必要があります。

ここでそれを行うための一つの方法です：

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>

は}）;