Forum: Ruby on Rails Dependency drop down list

Bf365c70294cd24f0f01db8de7aaff08?d=identicon&s=25 Praveen BK (praveenbk)
on 2014-03-04 10:28
Hello,

     I am trying load a drop down list based on selection from first
drop
down list. Based on first drop down list selection, I am able to fetch
data for second drop down list but I am not able to refresh second
dropdown list contents.

How Can I refresh second drop list on selection of first drop down list,
I have values for drop down list in an array.
08497221017521ae126ca4fa7134ce8e?d=identicon&s=25 unknown (Guest)
on 2014-03-05 19:37
(Received via mailing list)
You'd need to do this in Javascript using what's called a "chained
select".
 There's a variety of plugins that do this, but here's
one: http://www.appelsiini.net/projects/chained

You typically have two options:

   1. Write out all of the available options for your second select when
   the page loads, then selectively hide/show some of them depending on
the
   first select's selection.
   2. Make an ajax call back to your application when the first select
is
   changed which will return to you the available options to populate
the
   second select.  This may be the best option if you have a lot of
options in
   your selects.

If you need to support clients that do not have javascript enabled: I've
also seen option #1 done with optgroups, so you'd write out your second
select with the corresponding options for each option in the first
select
nested within optgroups.  You'd then selectively hide/show the options
depending on what's selected from the first select.  The advantage here
is
that when JS is not available, the user just needs to scroll through the
second select to find the options that correspond to their selection
from
the first select.  It's not ideal, but it's a reasonable fallback.

Jim
A47e0a6beeb9d048ff054fc1c3a97418?d=identicon&s=25 Walter Davis (walterdavis)
on 2014-03-05 21:54
(Received via mailing list)
On Mar 5, 2014, at 1:35 PM, jim@room118solutions.com wrote:

> You'd need to do this in Javascript using what's called a "chained select".
There's a variety of plugins that do this, but here's one:
http://www.appelsiini.net/projects/chained
>
> You typically have two options:
>   * Write out all of the available options for your second select when the page
loads, then selectively hide/show some of them depending on the first select's
selection.
>   * Make an ajax call back to your application when the first select is changed
which will return to you the available options to populate the second select.
This may be the best option if you have a lot of options in your selects.
> If you need to support clients that do not have javascript enabled: I've also
seen option #1 done with optgroups, so you'd write out your second select with 
the
corresponding options for each option in the first select nested within 
optgroups.
You'd then selectively hide/show the options depending on what's selected from 
the
first select.  The advantage here is that when JS is not available, the user 
just
needs to scroll through the second select to find the options that correspond to
their selection from the first select.  It's not ideal, but it's a reasonable
fallback.

And I just want to add (just answered a couple questions in a row about
this on SO) that you should not rely on stuffing HTML into the <select>
tag to alter its options. This will work in a couple of browsers:

  document.getElementById('my_picker').innerHTML = '<option
value="whatever">Whatever</option>';

but it will fail silently and weirdly in several others. The best way to
build up a picker from an Ajax response is to get a JSON (or other
array) of value/text pairs and build up the option elements inside a
loop:

  myJSON.each(function(elm){
    my_picker.options[my_picker.options.length] = new Option(
elm['text'], elm['value'] );
  });

Hope this helps,

Walter
Please log in before posting. Registration is free and takes only a minute.
Existing account

NEW: Do you have a Google/GoogleMail, Yahoo or Facebook account? No registration required!
Log in with Google account | Log in with Yahoo account | Log in with Facebook account
No account? Register here.