8

I am trying to get a second dropdown based on first dropdown selection.

I found a great script here:

http://jsfiddle.net/heera/Gyaue/

enter code here

From this post: Jquery Depending on the first Dropdown display/sort a second dropdown?

However this example shows a "-- All --" option showing all the groups together and I need to do something just like

Dropdown A
America
Europe
Asia

Dropdown B
(if America is selected)
Argentina
Brazil
Chile

(if Europe is selected)
Italy
France
Spain

(if Asia is selected) China
Japan

What I'm trying to get is the same shown on that jsfiddle but I don't want to have a "Show all (groups)" together option.

Update: After many tries I ended up using the solution posted by Catalin Berta on his website at: http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

The final result from that URL is something like this: http://jsfiddle.net/c510xdrj/

This solution works on all major browsers.

Thanks to Shlomi Hassid for your help.

Community
  • 1
  • 1
CVB_CL
  • 83
  • 1
  • 1
  • 5

1 Answers1

9

I don't see where the problem is just drop the part that correspond to the all stuff and you are done.

Take a look: JSnippet Demo

jQuery:

$(function(){
    $('#groups').on('change', function(){
        var val = $(this).val();
        var sub = $('#sub_groups');
        $('option', sub).filter(function(){
            if (
                 $(this).attr('data-group') === val 
              || $(this).attr('data-group') === 'SHOW'
            ) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
    $('#groups').trigger('change');
});

HTML:

<select id="groups">
    <option value='America'>America</option>
    <option value='Europe'>Europe</option>
    <option value='Asia'>Asia</option>
<select>

<select id="sub_groups">
    <option data-group='SHOW' value='0'>-- Select --</option>
    <option data-group='America' value='Argentina'>Argentina</option>
    <option data-group='America' value='Brazil'>Brazil</option>
    <option data-group='America' value='Chile'>Chile</option>
    <option data-group='Europe' value='Italy'>Italy</option>
    <option data-group='Europe' value='France'>France</option>
    <option data-group='Europe' value='Spain'>Spain</option>
    <option data-group='Asia' value='China'>China</option>
    <option data-group='Asia' value='Japan'>Japan</option>
<select>

EDIT As mentioned in the comments this method is not supported by safari. here is a second solution that should work on any modern browser:

JSnippet DEMO

jQuery:

    $(function(){
    $('#groups').on('change', function(){
        var val = $(this).val();
        var sub = $('#sub_groups');
        $('option', sub).filter(function(){
            if (
                 $(this).attr('data-group') === val 
              || $(this).attr('data-group') === 'SHOW'
            ) {
              if ($(this).parent('span').length) {
                $(this).unwrap();
              }
            } else {
              if (!$(this).parent('span').length) {
                $(this).wrap( "<span>" ).parent().hide();
              }
            }
        });
    });
    $('#groups').trigger('change');
});
Shlomi Hassid
  • 6,500
  • 3
  • 27
  • 48
  • 1
    Just what I was looking for! Thank you very much and happy friday! – CVB_CL Sep 04 '15 at 21:01
  • Hello, sorry to reopen this thread, the script doesn't work on Internet Explorer and Safari. Do you have any suggestion to make it work with these 2 (important) browsers? Thank you very much. – CVB_CL Sep 18 '15 at 15:01
  • You are right - I didn't even think it was not supported by those two... Added a second solution - dirty but well supported – Shlomi Hassid Sep 18 '15 at 16:03
  • It worked great! Thank you! Why is this modification "dirty"? Could you pleas elaborate (just if you have time). Thanks. – CVB_CL Sep 18 '15 at 20:15
  • What it does it wraps the `option` ele with a `span` that cause the web-browser HTML parser to throw the span after the seclect box cause its not valid. You don't see it because the span is hidden - Its dirty but professional feel free to use it until the "others" start supporting all HTML specs :) – Shlomi Hassid Sep 18 '15 at 20:22
  • Thank you very much for your response. The script works great, but unfortunately when you now use it in Chrome browser the option value is not recognized instead the value from the first group is applied. So if you select "France" you will receive the value from "Brazil", if you select China you will get the value from "Argentina", if you select "Japan" you will get the value from "Brazil" and so on... Sorry to bother you but your help will be much appreciated. Thank you. – CVB_CL Sep 21 '15 at 15:17