prototype, scriptaculous Chained Select

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.


- - - - - - - - - - - - -



function loadSomeMore() {
if($F('some') != 'none') {
var opt = {
onSuccess: function(t) {
Element.update('someMore', t.responseText);
}
}
new Ajax.Request('/ajax/address/someMore/' + $F('some') + '/', opt);
}
}


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.


function loadSomeMore() {
if($F('some') != ''none) {
var opt = {
onSuccess: function(t) {
$('someMore').replace('' + t.responseText + '');
}
}
new Ajax.Request('/ajax/address/somevenMore/' + $F('some') + '/', opt);
}
}


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:





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.