CODEWITHSUNDEEP
jquery
Andy
Andy

Reputation: 3021

On change event not being recognized?

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?

Upvotes: 0

Views: 135

Answers (3)

Brad
Brad

Reputation: 11

//This worked for me - I appear to have inherited similar jquery custom select code

function onChange()
{
    var el=document.getElementById("selectid");

    //el.options[] is your array of options
    if (el.options[0].selected==true)
        //Some code 
}

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49188

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.

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72652

In the fiddle you use a select on the 'live' site you use some custom select (a div)

$('.outtaHere ul li a').click(function() {
 // do you stuff to show the elements
});

I don't know whether you can change the code of the custom select but it would be much cleaner to remove the inline javascript code.

Upvotes: 0

Related Questions