2016-04-08 36 views
1

私はSelect2(v3.5.2)を使用しており、複数のドロップダウンから1つ以上の値を選択できるようにしています。Select2同じ値の再選択を許可する

この単純な擬似HTMLマークアップを想像:デフォルトの機能は私のシナリオでは、私は必要な、一度だけ(A、B、C)のオプションを選択することができます

$(document).ready(function() { 
    $('.select2').select2(); 
}); 

<select class='select2' multiple> 
<option value="A">A</option> 
<option value="B">B</option> 
<option value="C">C</option> 
</select> 

とjQueryをユーザは同じオプションを複数回選択できるように、以下のことが可能になるように、次のようにしてください。

A,A,A,B,C 
A,B,B,B,C,C 
A,A,A,B,B,C,C,C 
etc... 

私の検索結果からは、バージョン3.5.2ではサポートされていないようですが、いくつかの投稿にはバージョン4.0.xでサポートされていると書かれています。

しかし、私はv4でそれに関するドキュメントを見つけることができず、とにかくまだ4にアップグレードしないでください。

バージョン3(または4)で動作させる方法を知っている人はいますか?

答えて

2

前述のとおり、複数の類似値を選択する機能はバージョン4.0では修正されているようですが、ドキュメントの参照は見つかりませんでした。だから私はselect2 3.2vフレームワークを使って機能を書かなければなりませんでした。 レンダリングされたDOMをよく見ると、select2は基本的にクラスselect2-disabledを追加し、ドロップダウンリストからアイテムを選択するとクラスselect2-result-selectableを削除するので、select2-result-selectableを追加することになります。

// initiate select2 
$('.select2').select2(); 
// delegate a click event on the input box 
$('.select2-input').on('click',function() 
{ 
    // remove select2-disabled class from all li under the dropdown 
    $('.select2-drop .select2-results li').removeClass('select2-disabled'); 
    // add select2-result-selectable class to all li which are missing the respective class 
    $('.select2-drop .select2-results li').each(function() 
    { 
    if(!$(this).hasClass('select2-result-selectable')) 
     $(this).addClass('select2-result-selectable'); 
    }); 
}); 

    // had to include the following code as a hack since the click event required double click on 'select2-input' to invoke the event 
$('.select2-container-multi').on('mouseover',function() 
{ 
    $('.select2-input').click(); 
}); 

の作業例:https://jsfiddle.net/DinoMyte/qcgvucnz/1/

+0

SELECT2 4.0バージョンでこれをどのように達成するかのいずれかのドキュメント? – Gowrav

関連する問題