prototype, scriptaculous Chained Select

All, Javascript, Prototype, Scriptaculous

For one of my projects i had to make some select boxes which would work in a chain. I had 500.000 inserts in mysql which should be found easily. So i implemented 5 chained select boxes.

The first part of the project was not meant to be public so i limited my work to Firefox. But after a while the public part started and i wanted to use some ready made widgets in smarty (like my address widget with 5 chained select boxes). When i tried it in IE 6 it did not worked.

Here is how it looks like. The next select box will be loaded onchange of the parent select box.

  1. <select name="address[some]" id="some" onchange="loadSomeMore();">
  2.        <option value="none">- - - - - - - - - - - - -</option>
  3. </select>
JAVASCRIPT [Show Plain Code]:
  1. function loadSomeMore() {
  2.         if($F(’some’) != ‘none’) {
  3.                 var opt = {
  4.                         onSuccess: function(t) {
  5.                                 Element.update(’someMore’, t.responseText);
  6.                         }
  7.                 }
  8.                 new Ajax.Request(‘/ajax/address/someMore/’ + $F(’some’) + ‘/’, opt);
  9.         }
  10. }

I started to look on http:\\www.google.com for a similar problem. I found the problem with IE 6, but there was no real fix to the problem. The problem was Element.update() of prototype. There was a fix (i think on rails mailing list) which hacks protoype.js. It works but it replaces the whole select box instead of changing only the options. So if you change also the select tag you loose the onchange trigger so you cannot trigger the next select box.

So since i knew the name of function which should be called via on change. I changed the functions with Element.replace.

JAVASCRIPT [Show Plain Code]:
  1. function loadSomeMore() {
  2.         if($F(’some’) != none) {
  3.                 var opt = {
  4.                         onSuccess: function(t) {
  5.                                 $(’someMore’).replace(‘<select name="address[someMore]" id="SomeMore" onchange="someEvenMore();">’ + t.responseText + ‘</select>’);
  6.                         }
  7.                 }
  8.                 new Ajax.Request(‘/ajax/address/somevenMore/’ + $F(’some’) + ‘/’, opt);
  9.         }
  10. }

So if you want to make chained selects with prototype, instead of updating the select box options just replace the whole select box with its options. So the response from ajax would be:

  1. <select onchange="loadNextSelectBox();">
  2.      <option>
  3.      <option>
  4. </select>

instead of

I am not sure if the example above would work, the id’s are mixed. But otherwise the script works fine. The next functions for next child in chained select is almost copy paste, so it is fast to make.

Have fun.

2 Responses to “prototype, scriptaculous Chained Select”

  1. Christofer Lundstedt Says:
    October 17th, 2007 at 10:54:59

    Just wanted to say that this helped me alot! Have been sitting for hours to figure out why IE wont update my select list.

    Thanks for the answer :)

  2. cross Says:
    June 2nd, 2008 at 01:34:43

    Just for this moment I killed for a 3 hours, and only now found your post. Thanks for solution.

Leave a Reply

Icons by N.Design Studio. Designed By Ben Swift. Powered by WordPress and Free WordPress Themes