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/
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/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments