# Dynamic Select Box **URL:** \ **Category:** Rails\ **Created:** [April 12, 2006, 12:35pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605 "2006-04-12T12:35:03Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 12, 2006, 12:35pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/1 "2006-04-12T12:35:03Z")
Hi, I’m new to rails/ruby having come from PHP and am just starting to get my head round how easy it can be 🙂 However, can anyone point me in the right direction for dynamicaly updating a select box based upon the choice of a previous select box, without a page refresh. Any and all help greatly appreciated. Thanks ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 12, 2006, 1:23pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/2 "2006-04-12T13:23:46Z")
Using RJS calls with an observe\_field is the way to go. Works great in FF but you cannot do this in IE by using RJS alone. The reason is that RJS uses the innerHTML method to replace content with a page.html\_replace call. IE does not support the innerHTML call on select boxes. You would need to implement it in javascript completely. The only way that I can think of (maybe) is to use a javascript array and update the array from an RJS call. Cheers ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 12, 2006, 2:56pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/3 "2006-04-12T14:56:37Z")
Liquid wrote: > Using RJS calls with an observe\_field is the way to go. Works great in > FF but you cannot do this in IE by using RJS alone. The reason is that > RJS uses the innerHTML method to replace content with a > page.html\_replace call. IE does not support the innerHTML call on > select boxes. You would need to implement it in javascript completely. > Or rip out the whole select box and replace it, rather than just the > option list. – Alex ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 13, 2006, 2:02am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/4 "2006-04-13T02:02:52Z")
I did try to rip out the entire select box and replace it, but for some reason that I still havn’t worked out, once I replaced the select box, the observe\_field didn’t work anymore so my next box (I had 3) was never going to update. ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 12, 2006, 6:16pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/5 "2006-04-12T18:16:39Z")
My approach was exactly that… My select box was monitored by an observer… The observer called another action that rendered the partial for the second select box. ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 13, 2006, 2:48am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/6 "2006-04-13T02:48:35Z")
On Apr 12, 2006, at 5:02 PM, Liquid wrote: > I did try to rip out the entire select box and replace it, but for > some reason that I still havn’t worked out, once I replaced the > select box, the observe\_field didn’t work anymore so my next box (I > had 3) was never going to update. Here is one way that we have been doing dynamic select boxes. Maybe this helps you a bit. ----The first select box -------- \<%= select\_tag( :model\_year, options\_for\_select( @model\_years, session [:PersVeh].model\_year ), :onchange =\> remote\_function( :update =\> ‘NOTUSED’, :with =\> “‘model\_year=’+value”, :loading =\> “Element.show(‘loading-indicator1’)”, :complete =\> evaluate\_remote\_response, :url =\> { :action =\> :vehicle\_select\_make } ) ) %\> \<%= image\_tag(‘indicator.gif’, :id =\> ‘loading-indicator1’, :style =\> ‘display:none;’ ) -%\> ----submits to an action that fills the variables and then does render :layout =\> false---- ----Here is what the action renders------ \<%= update\_element\_function(‘vehicle\_makes’, :content =\> render( :partial =\> ‘vehicle\_select\_make’ ) ) %\> Element.hide(‘loading-indicator1’); Element.show(‘vehicle\_makes’); \<%= update\_element\_function(‘button-group’, :content =\> render( :partial =\> ‘vehicle\_buttons’ ) ) %\> So basically the trick is with the :complete =\> evaluate\_remote\_response in the select tags. This makes the results of the request get eval’ed in JS. Hope that helps a bit. Cheers- -Ezra ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 13, 2006, 2:54am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/7 "2006-04-13T02:54:40Z")
Thanx Ezra… Is there some documentation for evaluate\_remote\_response? Is this a ruby/rails method or a JS function? I’m not familiar with this one. Cheers ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 13, 2006, 3:21am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/8 "2006-04-13T03:21:52Z")
I’m not sure if there is any docs for that 😉 I found it a long time ago by accident and I don’t remember seeing much docu for it. ``` Ohh wait here it is! ``` [http://rubyonrails.com/rails/classes/ActionView/Helpers/](http://rubyonrails.com/rails/classes/ActionView/Helpers/) PrototypeHelper.html#M000419 Cheers- -Ezra ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 13, 2006, 3:24am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/9 "2006-04-13T03:24:54Z")
Cool … Thanx I’ll give it a try… ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 13, 2006, 4:07am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/10 "2006-04-13T04:07:12Z")
can i use ruby to develope mobile application andre * * * Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around > **[\[object](https://mail.yahoo.com/)** > > \[object ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 13, 2006, 10:48am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/11 "2006-04-13T10:48:39Z")
Thanks Ezra. That’s just what i needed Karl ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [April 13, 2006, 4:28am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/12 "2006-04-13T04:28:30Z")
Yes Dave M. ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [August 19, 2006, 12:00am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/13 "2006-08-19T00:00:11Z")
Daniel ----- wrote: > Cool … Thanx I’ll give it a try… Were you able to imlement the dynamic select box? I have a similar requirement to populate City based on State and then Locality based on City. If yes, could you please email me the code or paste the code here. Thx. Ramanan ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [August 19, 2006, 12:45am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/14 "2006-08-19T00:45:38Z")
On Saturday, August 19, 2006, at 12:00 AM, Ramanan wrote: > Ramanan > > – > Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/). > > * * * > > Rails mailing list > removed\_email\_address@domain.invalid > [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails) Take a look at this… [http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/](http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/) \_Kevin [www.sciwerks.com](http://www.sciwerks.com) ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [August 19, 2006, 1:01am UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/15 "2006-08-19T01:01:15Z")
Kevin O. wrote: > On Saturday, August 19, 2006, at 12:00 AM, Ramanan wrote: > > > Ramanan > > > > – > > Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/). > > > > * * * > > > > Rails mailing list > > removed\_email\_address@domain.invalid > > [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails) > > Take a look at this… > > [http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/](http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/) > > \_Kevin > [www.sciwerks.com](http://www.sciwerks.com) I have a working code where there are only 2 select boxes i.e. populating city when state is selected. I am having issues with populating locality based on selected city. Working with 2 dynamic select is straight forward. Working with more than 2 dynamic/cascading select box is a real issue. Thx. for your help ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [September 1, 2006, 3:30pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/16 "2006-09-01T15:30:13Z")
I am experiencing problems retrieving information from the related drop downs. I can save information in the database (i.e. state\_id and city\_id are getting saved in the Address table). However on the Address’s edit/update screen, the information from the first “State” drop down is getting retrieved properly but nothing is getting displayed in the second drop down - “City”. I am using observe fields to retrieve data for the second drop down. Please advise how to prepopulate information for the second drop down based on the “id” stored in the database on Edits screens. Thanks in advance for your help! I Ramanan wrote: > Kevin O. wrote: > > > On Saturday, August 19, 2006, at 12:00 AM, Ramanan wrote: > > > > > Ramanan > > > > > > – > > > Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/). > > > > > > * * * > > > > > > Rails mailing list > > > removed\_email\_address@domain.invalid > > > [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails) > > > > Take a look at this… > > > > [http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/](http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/) > > > > \_Kevin > > [www.sciwerks.com](http://www.sciwerks.com) > > I have a working code where there are only 2 select boxes i.e. > populating city when state is selected. I am having issues with > populating locality based on selected city. Working with 2 dynamic > select is straight forward. Working with more than 2 dynamic/cascading > select box is a real issue. > > Thx. for your help ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [September 1, 2006, 4:58pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/17 "2006-09-01T16:58:15Z")
Here is relevant code: The “city” in the second dropdown is not getting selected in Edit screen. ## Thank you so much for you help! \_form.rhtml ``` <%= collection_select(:address, "state_id", State.find(:all), :id, ``` :state) %\> \<%= render :partial =\> ‘select\_city’ %\> ``` <%= observe_field("address_state_id", :frequency => 0.25, :update => "address_city_container", :url => {:controller => 'address', :action => ``` :filtered\_city\_select}, :with =\> “‘state\_id=’ + value”)%\> \<% -------- - address\_controller.rb def filtered\_city\_select @cities = City.find\_all\_by\_state\_id(@params[“state\_id”]) render :partial =\> ‘select\_cities’ end def edit @address = Address.find(params[:id]) @states = State.find\_all @cities = City.find(:all, :conditions =\>[ “state\_id = ?”, @address.state\_id]) end %\> * * * partial \_select\_cities.rhtml \<% if @cities %\> – Select City – \<%= options\_from\_collection\_for\_select(@cities, “id”, “city”) %\> \<% end %\> ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [September 1, 2006, 5:30pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/18 "2006-09-01T17:30:46Z")
Iw wrote: > :state) %\> > > - address\_controller.rb > @address = Address.find(params[:id]) > partial \_select\_cities.rhtml > – > Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/). Couple of points. 1. if you set the frequency of your observer to 0, it should fire off whenever the value changes, and not every 0.25 seconds. 2. check your log files to see if you are getting errors thrown by the filtered\_city\_select method 3. Don’t use ‘@params’, it’s deprecated. Does it work at all? \_Kevin ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [September 1, 2006, 4:20pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/19 "2006-09-01T16:20:29Z")
Iw wrote: > I am using observe fields to retrieve data for the second drop down. > > > > On Saturday, August 19, 2006, at 12:00 AM, Ramanan wrote: > > > Take a look at this… > > > select is straight forward. Working with more than 2 dynamic/cascading > > > select box is a real issue. > > > > Thx. for your help > > – > Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/). You’d have to give us a bit more information about how you are populating your select in the first place. \_Kevin ---
**Author:** ![saboteur](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/7c8e57/32.png) [@saboteur](https://www.ruby-forum.com/u/saboteur)\ **Post date:** [October 11, 2006, 5:14pm UTC](https://www.ruby-forum.com/t/dynamic-select-box/57605/20 "2006-10-11T17:14:35Z")
You can do it with mostly javascript. Here is an Ajax ‘double select’ widget, in object-oriented, cross-browser JavaScript. Very easy to plug and play: [http://www.webonweboff.com/widgets/ajax/ajax\_linked\_selection.aspx](http://www.webonweboff.com/widgets/ajax/ajax_linked_selection.aspx) Article includes a demo, source code, explanations. The page that actually retrieves the db data will need to be in your web language of choice, of course. Hope this helps… [Next page](https://www.ruby-forum.com/t/dynamic-select-box/57605.md?page=2)