Question

I have this code which is looking for an onchange event:

//Create destination switch
    $('#regionselect').change(function(){
        var selected = $(this).find(':selected');
        $('.optionvalue').fadeOut(function(){
             $('.optionvalue').html(selected.html()).fadeIn()
                 .attr('class', 'optionvalue '+selected.val());   
        });
        var count = $('.countrylist').length;
        $('.countrylist').slideUp(function(){
            if(!--count) {
               $('.'+selected.val()).slideDown();
            }       
        });
    });

It works perfectly here:
http://jsfiddle.net/XfPv7/1/

Can anyone help?

Answer 1

Your real problem is this:

http://www.thestc.co.uk/assets/js/form.js

The scripts found here include the functions populateSelectOptions(), selectMe(), showOptions(), which together serve to defeat your real select onChange event handler, since you are not interacting with your real select at all.

If you kill the select replace scripts, it works fine. See: http://jfcoder.com/test/customselect.html

EDIT

Here’s kind’ve a brute-force way to fix the issue.

function setDestOpts(dest) {
    reg = $('#regionselect');
    reg.val(dest);
    reg.trigger('change');
    $('#optionsDiv8').removeClass('optionsDivVisible').addClass('optionsDivInvisible');
}
var checkDest = function() {
    if ($('#optionsDiv8').length == 0) return;
    clearInterval(destinterval);
    c_opt = 0;
    $('#optionsDiv8 ul li a').each(function(c_opt){
        reg = $('#regionselect option');
        href = "javascript:setDestOpts('" + reg.eq(c_opt).val() + "');";
        $(this).attr('href', href);
        c_opt++;
    });
}

var destinterval = setInterval(function(){checkDest()}, 500);

http://jfcoder.com/test/customselect.html

All this does is change the Javascript injected into the A.HREF, which is the root problem. This simulates the changing of the value and then triggers on the onChange event.

Note, for some reason jQuery is not loading on every page load for that link on my site, so if it doesn’t work the first time, reload the page after it has entirely loaded.