views:

228

answers:

1

Hi,

I want to observe multiple select menus and respond to their changes using prototype but only the first menu seems to be observed. This is my code:

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

If there are - for example - 3 selects within product_options then it only observes the first, i thought it might be because of invoke so i then tried this:

$('product_options').select('select').each(function(sel){
    $(sel).observe("change",optchange);
});

Still doesnt work though, any ideas whats wrong?

There's definitely nothing wrong with the selector as a console.debug() shows me all the select menus

+2  A: 

Have you checked your JS error console? The below works just fine:

<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>
good point, should have checked it with minimum complexity. must be an issue elsewhere. points are yours :)
seengee
Very useful! How can I know in "optchange" which select triggered it ?
xain