How is drop down being updated?

Question

This is realated to a much more complex earlier post, where I was trying to tie together js event handlers. I realized after reviewing my earler post that I am not sure how one of the behaviors on my site works so I wanted to post it as a new topic.

Basically, I am working with a commercial wordpress plugin that uses a lot of very complex JS/AJAX code to update some dropdown menus depending on what selection a user makes. For example, if you select 'option 1' in drop down menu #1, drop down menu #2 is updated with 'a,b & c' and if you were to select 'option 2' in drop down menu #1, drop down menu #2 would display 'x,y & z'.

The problem is that I have no idea how the plugin detects changes in drop down menu #1 in order to update the options in drop down #2. Normally, there is some sort of onClick event that handles these kinds of events but after scouring the code, I can't find anything.

Rather than post the complete code here, I think it might be easier to point you to the actual site, so that you can look for yourself. I would really appreciate it if someone could tell me how drop down menu changes are being detected and what function is handling the update.

Answer 1

EDITED after the content of the sample was explained: I had a look at what appears to be the catalog/cart behavior. All the code is minified and hard to read, but it looks like they're using change functions. Regardless as to whether they are or not, I'd use change if I was you. What you're doing in the code you're playing with looks like you've got the right idea.

Answer 2

Changes are detected by using the generic event "onchange" of the drop down element.

The onchange can be bound inline, for example:

<select onchange="HandleChange(this);">

Or using client side script it can be bound with commands like attachEvent or addEventListener, depending on the browser, and I'm pretty sure that's what jQuery is using behind the scenes.

The question is: why are you asking this? What's your goal?

Answer 3

I think the code you want is minified which makes it very difficult to read but this bit f(k).change or f(i).change in the 'ProductOptionsMenus' function is probably the bit thats doing the work (f is jqnc() which I suspect is the jQueryNonConflict fubnction) what k and i are partly depends what variables are passed as l,g,o and p

With regards to your comments I tried this script: Sorry I only got as far as running this script:

$('#options-1 option').each(function(){
    $(this).parent().after('<input type="radio" name="options-1radio" value="'+$(this).val()+'" /> - '+$(this).text()+'<br />');
});
$('#options-1').after('<br />');
$('input[name=options-1radio]').click(function(){
    radioVal = $('input[name=options-1radio]:checked').val();
    $('#options-1').val(radioVal);
    $('#options-1').change();
});
//$('#options-1').hide();

But alas I'm having the same issue you are that it's not triggering the switch that activates the price lookup. I am getting a 'too much recursion' error but that seems to fire without the code above running. I don't know if that is your added code or the original source.

Wish you the best in solving this. If I have any thoughts I'll post.

Answer 4

It's at the bottom of the page there is a jquery function with the .change tag, it's just updating the values through that function. It's getting some values passed through there and appending it to the lower one.

 $(function(){
    $("#options-1 option").each(function(i, e) {
        $("<input type='radio' name='r' />")
        .attr("value", $(this).val())
        .attr("checked", i == 0)
        .click(function () {
            $("#options-1").val($(this).val());
        })
        .appendTo("#r");
       $("#options-1").change(function(){
       $("input[name='r'][value='"+this.value+"']").attr("checked","checked");
});
});
});

$("#options-1").change(function(){
$("input[name='r'][value='"+this.value+"']").attr("checked","checked");

});