Home/ Questions/Q 848593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T06:58:03+00:00

I asked a question previously , it was answered correctly in the form I

  • 0

I asked a question previously, it was answered correctly in the form I asked it but realised now why it wasn’t working for me.

I have this code to observe multiple select menus:

$('product_options').select('select').invoke("observe","change",optchange);

This does work – as pointed out – with static layout like this:

<html> 
  <head> 
    <title>optchange</title> 
    <script type="text/javascript" src="prototype.js"></script> 
  </head> 
  <body> 
    <div id="product_options"> 
      <select id="o0"> 
        <option>1</option> 
        <option>2</option> 
      </select> 
      <select id="o1"> 
        <option>1</option> 
        <option>2</option> 
      </select> 
      <select id="o3"> 
        <option>1</option> 
        <option>2</option> 
      </select> 
    </div> 
    <script type="text/javascript"> 
      function optchange(e) { 
        alert("optchanged"); 
      } 
      $('product_options').select('select').invoke("observe","change", optchange); 
    </script> 
  </body> 
</html>

But in my context, making a selection in the first select menu fires of an Ajax.Updater that completely replaces the content of Select 2 – this is killing the event observer. Is there a way to fix this without having to apply a new event observer each time?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’re looking for here is event bubbling – With event bubbling, you can assign just one event handler to a higher element and the browser will pass any events on its children up the chain to their parent. You would end up with something more like this:

    $('product_options').observe("change",function(event){optchange(event);});

function optchange(event){
    console.log(Event.findElement(event, 'select'));
}

    However, there is a bit of a gotcha here – according to this post select events don’t bubble in IE6

    • 0