selectpicker mutiple selection,在选择特定选项时取消选择选项

时间:2015-05-09 22:06:14

标签: jquery select multiple-select unselect

我想与你分享这个我可以在一段时间内拯救一个人。几天前,如果我在selectpicker插件多选中选择另一个选项,我试图找出如何取消选择某些选项。所以这是我的代码,它可以节省你很多时间的人http://jsfiddle.net/xroot/tj841kzc/ 谢谢

$('.selectpicker').on('change', function (e) {
    // take jquery val()s array for multiple
    //store the selected value
    var $selectedOption = $(this).find(':selected');
    var attending = $selectedOption.data('attending');
    var checkAttendings = [];
    $selectedOption.each(function(index){
        checkAttendings.push($(this).data('attending'));
    });
    // take jquery vals() array for multiple
    var value = checkAttendings || [];

    // take the existing old data or create new
    var old = $(this).data('old') || [];

    // take the old order or create a new
    var order = $(this).data('order') || [];

    // find the new items
    var newone = value.filter(function (val) {
        return old.indexOf(val) == -1;
    });
    // find missing items
    var missing = old.filter(function (val) {
        return value.indexOf(val) == -1;
    });
    // console.log(missing,newone)
    // remove missing items from order array and add new ones to it
    $.each(missing, function (i, miss) {
        order.splice(order.indexOf(miss), 1);
    })
    $.each(newone, function (i, thing) {
        order.push(thing);
    })

    // save the order and old in data()
    $(this).data('old', value).data('order', order);

    if(JSON.stringify(order) == JSON.stringify([1,2]) || JSON.stringify(order) == JSON.stringify([0,2]))
    {
        attending = 2;
    }


    //if current selected array equal to [0,2] that means user trying to check TBD
    if(JSON.stringify(order) == JSON.stringify([1,0]) || JSON.stringify(order) == JSON.stringify([2,0]))
    {
        attending = 0;
    }

    //if current selected array equal to [0,1]  or [2,1] that means user trying to check Attending date
    if(JSON.stringify(order) == JSON.stringify([0,1]) || JSON.stringify(order) == JSON.stringify([2,1])){
        attending = 1;
    }

    console.log(order, 'attending :'+attending);

    if(attending == 1)
    {

        $(this).next().find('button').removeClass('btn-default btn-danger btn-success').addClass('btn-success');
        var tbd = $(this).find('[data-attending="2"]');
        var notAttending = $(this).find('[data-attending="0"]');
        if(tbd.is(':selected'))
        {
            tbd.prop('selected',false);

            $(this).selectpicker('refresh');
        }

        if(notAttending.is(':selected'))
        {
            notAttending.prop('selected',false);
            $(this).selectpicker('refresh');
        }
        order.reverse();
    }

    if(attending == 2)
    {

        $(this).next().find('button').removeClass('btn-default btn-danger btn-success').addClass('btn-default');

        var coming = $(this).find('[data-attending="1"]');
        var not = $(this).find('[data-attending="0"]');

        if(coming.is(':selected'))
        {
            console.log('comming');
            coming.prop('selected',false);
            $(this).selectpicker('refresh');
        }
        if(not.is(':selected'))
        {
            console.log('not comming');
            not.prop('selected',false);

            $(this).selectpicker('refresh');
        }
        order.reverse();
    }

    if(attending == 0)
    {
        var screening_date_id   = 0;

        $(this).next().find('button').removeClass('btn-default btn-danger btn-success').addClass('btn-danger');

        var yesComing = $(this).find('[data-attending="1"]');
        var tbd = $(this).find('[data-attending="2"]');

        if(yesComing.is(':selected'))
        {
            yesComing.prop('selected',false);
            $(this).selectpicker('refresh');
        }
        if(tbd.is(':selected'))
        {
            tbd.prop('selected',false);

            $(this).selectpicker('refresh');
        }
         order.reverse();
        console.log(order, 'attending :'+attending);
    }
    //order.length = 0;
});

0 个答案:

没有答案