web-dev-qa-db-ja.com

select2MULTIPLEプレースホルダーが機能しない

次のコードを使用してアイテムを選択していますが、プレースホルダーが既に表示されていません。私はこの例を使用しています 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",
});
javascriptcsstwitter-bootstrapselectplaceholder
9
Majo Mrva

これをスクリプトファイルに追加します。

$('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>
13
Oleg Sewruk

これを理解しようと何時間も試みた後、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%');
2
RoyDene

プレースホルダータグは選択リストの有効な属性ではありません

次のようなものを使用できます。

       <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 の例は、まったく異なる構造です

0
wedo

私にとって、プレースホルダーには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"
   }
});
0
Lou K

あなたの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
});
0
AndreiDeholte

スクリプトファイル内：

$("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>
0
Faisal Shahzad