How to reset select box with jquery using selectboxit

Question

I am using Fancybox to pop up a div in the middle of the page that has a select box styled with the selectboxit jquery plugin here: http://gregfranko.com/jquery.selectBoxIt.js/. Now I change the select value to something other than the default and close the Fancybox. When I reopen that Fancybox, the select value is still the same as what I had selected. I need it to reset to the default. Here is the javascript coode that I have right now:

var selectBox = $("select").selectBoxIt();
        $(".fancybox, #cartLink").fancybox({
            width: 800,
            autoHeight: true,
            minHeight: 385,
            scrolling: 'no',
            autoSize: false,
            afterClose: function () {
                $(selectBox).val('0');
                $(selectBox).refresh();
                console.log('should be reset!');
            }
        });

The first two lines in the 'afterClose' function do not work. The first might be doing something but the refresh line says this in Firebug: "TypeError: $(...).refresh is not a function $(selectBox).refresh();" Any ideas how I can reset this selectbox?

Edit: As requested, here is a fiddle: http://jsfiddle.net/Qh2NP/1/

Answer 1

You can use the SelectBoxIt selectOption() method. Like this:

 $(document).ready(function () {
     var selectBox = $("select").selectBoxIt();
     $("#cartLink").fancybox({
         width: 800,
         autoHeight: true,
         minHeight: 385,
         scrolling: 'no',
         autoSize: false,
         afterClose: function () {
             $(selectBox).selectBoxIt('selectOption', 0);
             $(".notification").hide();
             console.log('should be reset!');
         }
     });
 });

Here is a link to your updated jsfiddle: http://jsfiddle.net/Qh2NP/2/