Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Thanked 0 Times in 0 Posts

    Post Changing value of SELECT via jQuery not triggering AJAX for next field

    I'm trying to get it so that when I click onto a link, it'll change the value of a select field. There is JS (outlined below) in place to enable the next select field once the first has been selected. This appears to be triggered by 'onChange' so I thought my code would work. It does change the value in the first select field, but the AJAX to enable the second select and grab it's values is not triggered unless I manually select the value from the first select and click it with my mouse.

    The code for changing the value of the select on-click is...

    $('.dropdown-element li').click(function(){
        var value = $(this).attr("rel");
        return false;
    The code that I'm trying to trigger essentially is below...

    initialize: function(containerId, ajaxUrl, loadingText, isNeedLast)
        this.containerId = containerId;
        this.ajaxUrl     = ajaxUrl;
        this.loadingText = loadingText;
        this.isNeedLast  = Number(isNeedLast);
        this.selects     = new Array();
        //possible bug if select order in the HTML will be different
        $$('#' + this.containerId + ' select').each(function(select){
            select.observe('change', this.onChange.bindAsEventListener(this));
            this.selects[this.selects.length] = select;
    onChange: function(event)
        var select     = Event.element(event);
        var parentId   = select.value;
        var dropdownId = 0;
        /* should load next element's options only if current is not the last one */
        for (var i = 0; i < this.selects.length; i++){
            if (this.selects[i].id == select.id && i != this.selects.length-1){
                var selectToReload = this.selects[i + 1];
                if (selectToReload){
                    dropdownId = selectToReload.id.substr(selectToReload.id.search('--') + 2);
    Any and all help is much appreciated as I'm stumped! Thanks!

    Demo of Page (the links are haphazardly placed under the drop-downs):

  2. #2
    Senior Coder
    Join Date
    Dec 2010
    Thanked 570 Times in 563 Posts
    It seems like you are mixing jQuery with another framework (is it Prototype?). Am I right? This could be worth mentioning ...

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,299 Times in 1,269 Posts
    Indeed. Read this sticky.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts