Magento should have some JS (using Prototype) to handle that functionality. It sounds like that functionality no longer works.
Did the problem start around the same time you added jQuery to the site? If so, the issue is likely being caused by a JavaScript variable conflict.
Both Protoype and jQuery use the $ variable for selecting elements. In Prototype, $ is a shortcut for document.getElementById. The code to get an input element with the id region would look like this : var field = $('region'); However, if $ refers to the jQuery library, this code would instead try to locate a <region> element, just like $('body') would match the <body> tag.
The solution to this is preventing jQuery from causing the conflict. Immediately after jQuery is included on the page, execute this JS: jQuery.noConflict(). This causes jQuery to give the $ variable back to Prototype, thus resolving the conflict and fixing the standard Magento JS.
Any custom code expecting $ to refer to jQuery will now break. There are two possible solutions:
- Rename
$ to jQuery in all your code (messy, time-consuming)
- Wrap it in a closure, essentially creating an alias of
$ = jQuery only for the code within that closure.
Here's what the closure looks like:
// Outside of here, $ might refer to Prototype or jQuery - we simply don't know
(function($){
// Your code goes here. Any reference to $ inside here will always be for jQuery
})(jQuery);
Here's a quick example:
Before:
// $ refers to the Prototype function
$('#header ul').hide();
After:
(function($){
// $ now refers to jQuery
$('#header ul').hide();
})(jQuery);
Hope that helps!
