show/hide multiple select boxes using jquery

Question

I have some problem with my code so PLEASE if you could help me... So I have select box and when I chose first option i need to show some div with some forms, and if I chose second option i need to show another select box.. So that every option from that other select box could show two different forms... So here is my html:

<select id="customer-chose" data-placeholder="Choose">
    <option value="0" default selected="">Choose</option>
    <option value="current">1</option>
    <option value="not" class="next">2</option>
</select>
<select id="user" class="opt">
    <option value="0" disabled selected class="not">Chose</option>
    <option value="1" class="not">1a</option>
    <option value="2" class="not">2a</option>
</select>
<div id="current" class="customer" style="display:none">
    <form>
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="text" name="lastname">
    </form>
</div>

And here is my jQuery:

$(document).ready(function() {
    $('#user').hide();
    $('#customer-chose').change(function(){
        $('.customer').hide();
        $('#' + $(this).val()).show();
    });
    $('#customer-chose').change(function() {
        if($(this).data('options') == undefined){
            $(this).data('options', $('#user option').clone());
        }
        $('#customer-chose option').click(function(){
            $("#user").hide();
        });
        if($('#customer-chose option:selected')) {
            $("#user").show();
        } else {
        $("#user").hide();
        }
        var id = $(this).val();
        var options = $(this).data('options').filter('[class=' + id + ']');
        $("#user").html(options);
    });
    $('#user').change(function(){
        $('.customer').hide();
        $('#' + $(this).val()).show();
    });
});

And here is fiddle: http://jsfiddle.net/9ARmX/

This code is working but only in Firefox...I need to work in all browsers...

Yaron U. · Accepted Answer · 2014-04-20 21:56:34Z

1

I'm not 100% sure what you were trying to do - but I suggest doing something a lot more generic

by defining on each element when it is suppose to be shown (I've arbitrarily chosen data-depand to say that) you can set which element is shown whenever the select's value changes

In html:

<select id="controller">
  <option value="0">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select> 

<div data-depand="1">This will be shown when "one" is selected</div>
<div data-depand="2">This will be shown when "two" is selected</div>

In Javascript:

$(document).ready(function(){
  $("#controller").change(function(){
     var val = $(this).val();
     $("[data-depand]").hide();
     $("[data-depand='"+val+"'").show();
  }).trigger("change"); //triggering the change in the beginning to hide the relevant data
});

Same code in fiddle: http://jsfiddle.net/AY7bV/

And one fiddle with your source: http://jsfiddle.net/9ARmX/3/

answered Apr 20, 2014 at 21:56

Yaron U.

7,9333 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

little Over a year ago

yes that is exactly what I'm trying to do... THANK you so much :)

Collectives™ on Stack Overflow

show/hide multiple select boxes using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related