jquery chosen before change event

Question

I want to capture a before change event of jquery chosen, so if the value clicked in chosen is not the required one, it just do nothing and go back to previous selected option. Is it possible?

something like

$('.chzn-select').chosen({
    'beforeChange': function(){
        //if option clicked is Option-3
        //do nothing

    }
});

score 6 · Answer 1 · answered Sep 18 '13 at 10:42

6

With the help of data jQuery function, change event and params.selected argument you can easily achieve that.

$(".chzn-select").chosen().on("change", function (evt, params) {
    if (params.selected === "Portugal") {
        var previous = $(this).data("previous") || "";
        $(this).val(previous).trigger("chosen:updated");
    } else {
        $(this).data("previous", params.selected);
    }
});

See this working demo

answered Sep 18 '13 at 10:42

letiagoalves

10,718
4
37
66

But this will work incorrectly if you have something selected by default. – Bohdan Kuts Apr 30 '18 at 14:53

score 1 · Answer 2 · edited May 23 '17 at 12:31

Something like this

(function () {
    var previous;    
    $(".chzn-select").focus(
        function () {
    // Store the current value on focus and on change
        previous = $(this).val();
    }).change(function() {
        if($(this).val()=="Option-3"){// //if option clicked is Option-3
            $(this).val(previous); // select the value prior to the change
            $(this).trigger("chosen:updated"); // tell chosen to pick up the updated value      
        }
    });
})();

I have taken the idea from : Getting value of select (dropdown) before change

jquery chosen before change event

2 Answers2