2017-02-03 4 views
0

select2を使用して定義された以下の複数のドロップダウンリストがありますが、プレースホルダは機能しません。jQuery Select2プレースホルダは、インラインで定義されていると機能しませんか?

<select class="js-select2" multiple="multiple" placeholder="Select State"> 
    <option value="AK">Alaska</option> 
    <option value="HI">Hawaii</option> 
</select> 

<select class="js-select2" multiple="multiple" placeholder="Select Fruits"> 
    <option value="Apples">Apples</option> 
    <option value="Oranges">Oranges</option> 
</select> 

<script> 
    $(".js-select2").select2({ 
     // placeholder: 'Select an option...' 
    }); 

</script> 

私は(上記コメントアウト)SELECT2オプションリスト内のプレースホルダを定義するが、私はすべてのSELECT2 multiselectsドロップダウンを初期化し、さまざまなプレースホルダを表示するには、単一のクラスを使用したい場合にのみ動作します。

これは可能ですか?

+0

ゼロインデックスに空の '

+0

@Afnanはマルチセレクションなので動作します。 – adam78

答えて

1

迅速な回避策については、プレースホルダオプションに属性の値を渡すことができますが:直接$(".js-select2").select2()を使用している場合、この問題が解決しない

$(".js-select2").each(function() { 
    $(this).select2({ 
     placeholder: $(this).attr('placeholder') 
    }); 
}); 

、私はそのコンテキストthisに仮定を指していません。正しいオブジェクト(またはそのようなもの)。しかし、eachループを使用して各要素ごとに個別に初期化すると、機能します。

https://jsfiddle.net/84whaced/また


、あなたは(驚くべき、我々は右、ドキュメントを確認した後、我々は見つけることができるか?)、https://select2.github.io/options.html#data-attributes参照HTMLでdata-placeholderを使用する場合、それが動作するはずです - https://jsfiddle.net/84whaced/1/

これを私はそう思っています。

0

あなたはあなたにもDemoを確認することができ、すべてのselect

$('select').select2({ 
    placeholder: function(){ 
     $(this).data('placeholder'); 
    } 
}); 

<select class="js-select2" multiple="multiple" data-placeholder="Select State"> 
    <option value="AK">Alaska</option> 
    <option value="HI">Hawaii</option> 
</select> 

<select class="js-select2" multiple="multiple" data-placeholder="Select Fruits"> 
    <option value="Apples">Apples</option> 
    <option value="Oranges">Oranges</option> 
</select> 

に別のプレースホルダdata-placeholderを使用することができます。

+0

ソリューションに感謝しますが、CBroeソリューションでは、データダッシュ属性を使用している場合は、初期化時にプレースホルダオプションを含める必要はありません。 – adam78

0

次のように動作します。

$("#state").attr('data-placeholder', 'Select State')、効果はありません。

ただし、attrを設定してから引数なしで$("#state").select2()を呼び出すと、プレースホルダが更新されます。

$("#state").attr("data-placeholder","Select State"); 
$("#state").select2(); 
0

たぶん、あなたはあなたのページにも同様IDSを持っています。 JSはデフォルトで最新のIDを選択します。それらを変更しようとします。

+0

adam78はcss-classによって要素を認識しています。 – OlafW

関連する問題