次のコードを使用してアイテムを選択していますが、プレースホルダーが既に表示されていません。私はこの例を使用しています select2-bootstrap
<div class="form-group" style="width:70px; height:44px;">
<select class="form-control select2" multiple="multiple" id="select2" placeholder="cawky parky">
<option>ahoj</option>
<option>more</option>
<option>ideme</option>
<option>na </option>
<option>pivo?</option>
</select>
</div>
<script src="//select2.github.io/select2/select2-3.4.2/select2.js"></script>
$(document).ready(function () {
$("#select2").select2({
multiple:true,
placeholder: "haha",
});
これをスクリプトファイルに追加します。
$('select').select2({
minimumResultsForSearch: -1,
placeholder: function(){
$(this).data('placeholder');
}
}):
HTMLでこれを追加します:
<select data-placeholder="Yours Placeholder" multiple>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
<option>Value 5</option>
</select>
これを理解しようと何時間も試みた後、selectが最初にレンダリングされたとき、.select2-search__fieldの幅が0pxであることに気付きました。オプションを選択してからオプションを削除すると、プレースホルダーが表示され、幅は約1000pxでした。
したがって、これを修正するために、次のことを行いました。
$('.search-select-multiple').select2({
dropdownAutoWidth: true,
multiple: true,
width: '100%',
height: '30px',
placeholder: "Select",
allowClear: true
});
$('.select2-search__field').css('width', '100%');
プレースホルダータグは選択リストの有効な属性ではありません
次のようなものを使用できます。
<select class="form-control select2" multiple="multiple" id="select2">
<option selected="selected">cawky parky</option>
<option>ahoj</option>
<option>more</option>
<option>ideme</option>
<option>na </option>
<option>pivo?</option>
</select>
次に、適切なjqueryを記述します
あなたの select2-Bootstrap の例は、まったく異なる構造です
私にとって、プレースホルダーにはallowClear: true
とオブジェクトモードが必要なようです。以下を試して、機能するかどうかを確認してください。 yadcfを使用した一般的な例については、 https://codepen.io/louking/pen/BGMvRP?# を参照してください(複雑さが増して申し訳ありませんが、yadcfはselect_type_optionsをselect2に直接渡すと思います)。
$("#select2").select2({
multiple:true,
allowClear:true,
placeholder: {
id: -1
text: "haha"
}
});
あなたのhtmlで
<select class="form-control select2" multiple="multiple" id="select2">
<option selected="selected">cawky parky</option>
<option>ahoj</option>
<option>more</option>
<option>ideme</option>
<option>na </option>
<option>pivo?</option>
</select>
あなたのjqueryで
$(".select2").select2({
placeholder: "Selecione",
allowClear: true
});
スクリプトファイル内:
$("select").each(function(i,v){
var that = $(this);
var placeholder = $(that).attr("data-placeholder");
$(that).select2({
placeholder:placeholder
});
});
hTMLに(data-placeholder = "Your text"を追加):
<select data-placeholder="Yours Placeholder" multiple>
<option>Value A</option>
<option>Value B</option>
</select>