web-dev-qa-db-ja.com

select2のドロップダウンのオープニングを無効にする

現在選択されているアイテムをクリアすると、select2 4がデフォルトでドロップダウンを開くようです。以前のバージョンのselect2はそのような動作をしていないようで、私はそれを達成しようとしていますが、今のところ運がありません。

デフォルトの動作を無効にし、ドロップダウンを開かずに選択したオプションをクリアできるように、clearイベントにフックする方法を誰かが知っていますか？

乾杯、アル

jqueryjquery-select2clear
17
Alberto

確認できますが、何らかの理由でイベントの防止が機能していないようです。タイムアウト後にドロップダウンを閉じるだけです。

$("select").select2({
    allowClear: true
}).on("select2:unselecting", function(e) {
    $(this).data('state', 'unselected');
}).on("select2:open", function(e) {
    if ($(this).data('state') === 'unselected') {
        $(this).removeData('state'); 

        var self = $(this);
        setTimeout(function() {
            self.select2('close');
        }, 1);
    }    
});

これが実際のフィドルです： http://jsfiddle.net/obq3yLf2/

13
Sam Arustamyan

これを機能させるためにタイムアウトは必要ありません。これが私の例です。

$('#my-select').select2({
    allowClear: true
}).on('select2:unselecting', function() {
    $(this).data('unselecting', true);
}).on('select2:opening', function(e) {
    if ($(this).data('unselecting')) {
        $(this).removeData('unselecting');
        e.preventDefault();
    }
});
41
adamj

同じことはGithubで参照してください。

選択を解除するときにselect2：openを防止する

そこから、提供された回答をリストしました。

1オプション

$('#select-id').on('select2:unselecting', function() {
    var opts = $(this).data('select2').options;
    opts.set('disabled', true);
    setTimeout(function() {
      opts.set('disabled', false);
    }, 1);
});

2オプション

var $el = $('#select-id');
$el.on('select2:unselecting', function(e) {
    $el.data('unselecting', true);
}).on('select2:open', function(e) { // note the open event is important
    if ($el.data('unselecting')) {    
        $el.removeData('unselecting'); // you need to unset this before close
        $el.select2('close');
    }
});
2
Lalit Kumar Maurya

別の簡単な実装：

$('select').on('select2:unselect', function(evt) {
    $(this).select2({
        placeholder : {
            id : '',
            text : '---None Selected---'
        },
        allowClear : true,
        theme : "bootstrap"
    }).select2('close');
});
0
Jajikanth pydimarla

アイテムの1つを選択解除した後、少し遅れて問題が発生し、この解決策で問題が解決しました：

$(this).select2({
    multiple: 'multiple',
}).on("select2:unselecting", function(e) {
    var self = $(this);
    setTimeout(function() {
        self.select2('close');
    }, 0);
});
0
Toni