Forum: Ruby on Rails show/hide divs according to selection box

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
82a578052d304559f15180bdf56555d2?d=identicon&s=25 Tarscher (Guest)
on 2009-02-20 14:22
(Received via mailing list)
hi all,

I have 3 divs (with id) and according to a selection made in a
selection box I want to show the corresponding div and hide the 2
other divs

eg:

selectionbox
- car
- bike
- motor

<div id="car"></div>
<div id="bike"></div>
<div id="motor"></div>

So when car is selected div car should bes hown and the other 2 should
be hidden.

How can this best be done?

Thanks
Stijn
80e4cb97cae5c8d745f72337d93fd8f2?d=identicon&s=25 MaD (Guest)
on 2009-02-20 15:04
(Received via mailing list)
plain old javascript. if you don't know how to do it, google helps:
http://www.webdeveloper.com/forum/showthread.php?t=122975
280b78a61a968391b7e07e912be102a8?d=identicon&s=25 Robert Walker (robert4723)
on 2009-02-20 15:13
Tarscher wrote:
> So when car is selected div car should bes hown and the other 2 should
> be hidden.
>
> How can this best be done?
>
> Thanks
> Stijn

You can do this using the Prototype library included as the default for
Rails, or jQuery if you prefer that.

1. Attached an observer to the selection box after the DOM is ready

Event.observe(window, 'load', function() {
  $('select_box').observe('change', selectBoxHandler});
});

2. Use AJAX to update the DOM

function selectBoxHandler() {
  switch $F('select_box') {
  case 'car':
    $('car').show();
    $('bike').hide();
    $('motor').hide();
    break;
  case 'bike':
    $('bike').show();
    $('car').hide();
    $('motor').hide();
  case 'motor':
    $('motor').show();
    $('car').hide();
    $('bike').hide();
    break;
  }
}

Note: This is just "off-the-cuff" code, but is should show the gist of
it. Also this can be accomplished using the Rails Prototype helpers, but
I'll leave that as an exercise for you.
82a578052d304559f15180bdf56555d2?d=identicon&s=25 Tarscher (Guest)
on 2009-02-24 17:17
(Received via mailing list)
Thanks, that helped me a lot.

I would like to set car as the default selection. I can use
the :default => in options_for_select but that dooesn't seem to
trigger the observer.

I tried to add
Event.observe(window, 'load', function() {
  $F('game_type').value  = 'car'
});

after the selection box observer but it doesn't set the car default.

Someoene has an idea?

Thanks


On 20 feb, 15:13, Robert Walker <rails-mailing-l...@andreas-s.net>
C42c706fab23da0b6d3cd2cfbb8db27d?d=identicon&s=25 Salil Gaikwad (salil)
on 2009-04-16 09:21
You can try this also .......

<select name="timesheet[filter]" id="filter" onchange="if (value=='car')
{Element.show('car');Element.hide('bike');Element.hide('motor');} else
{if {(value=='bike')
{Element.show('bike');Element.hide('car');Element.hide('motor');}else
{Element.show('motor');Element.hide('car');Element.hide('bike');}}"}>
   <option value="car" >Car</option>
   <option value="bike" >Bike</option>
   <option value="motor" >Motor</option>

</select>


<div id="car">Showing Car</div>
<div id="bike">Showing Bike</div>
<div id="motor">Showing Motor</div>

Regards,

Salil
This topic is locked and can not be replied to.