jQuery dropdown hide show div based on value

Question

this is a classic question but can't find the best approach. I have a dropdown with id project_billing_code_id and 3 values (1, 2, 3).

If value selected = 1 then show div with id one and only this one. div two and three must be hidden. I also want to make this happen when view is loaded so not only on change.

$(document).ready(function() {
  $("#hourly").hide();
  $("#per_diem").hide();
  $("#fixed").hide();
$("#project_billing_code_id").change(function() {
  if ($("#project_billing_code_id").val() == '1') {
   $("#hourly").show();
   }
  else if ($("#project_billing_code_id").val() == '2') {
   $("#per_diem").show();
   } 
  else if ($("#project_billing_code_id").val() == '3') {
   $("#fixed").show();
   }
  else { 
       $("#hourly").hide();
       $("#per_diem").hide();
       $("#fixed").hide();
       }
  });
});

You just need to add `$("#per_diem").hide();$("#fixed").hide()` to `$("#hourly").show()`, same for the other conditions. So the others stay hidden, when you show one div. — ace, Aug 10 '11 at 23:23

irama · Accepted Answer · 2011-08-12T09:47:23.517

18

You were close. You probably want a few small tweaks to the behaviours to make sure all the divs hide and that correct div is showing on page load.

Have a play with the code here: http://jsfiddle.net/irama/ZFzrA/2/

Or grab the updated JS code here:

hideAllDivs = function () {
    $("#hourly, #per_diem, #fixed").hide();
};

handleNewSelection = function () {

    hideAllDivs();

    switch ($(this).val()) {
        case '1':
            $("#hourly").show();
        break;
        case '2':
            $("#per_diem").show();
        break;
        case '3':
            $("#fixed").show();
        break;
    }
};

$(document).ready(function() {

    $("#project_billing_code_id").change(handleNewSelection);

    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));

});

Let us know how you go!

edited Aug 12 '11 at 09:47

answered Aug 10 '11 at 23:33

irama

658
4
9

Hi @Gaelle can you clarify what you mean when you say the value is saved? Can you post a full code sample? (You might like to try editing http://jsfiddle.net/irama/ZFzrA/1/ - click run to test your code, then click update when you're done, and add the new URL to a comment here.) – irama Aug 11 '11 at 01:00
Here is what happens. Value saved=2 , form loads with per_diem shown. Great. If I select value 3, then per_diem removed but fixed not shown. If value saved=3 form loads with fixed shown but if I select value2 then fixed removed but per_diem not shown. However if I select value 1 it works fine. – Gaelle Aug 11 '11 at 01:05
Thanks @Gaelle - Just to make sure I'm understanding you: It sounds like the value is being saved on the server-side? and then you are reloading/revisiting the page, which is successful, but once you change the value again, all divs are hidden? If so, could you post a copy of the HTML that is rendered when you reload/revisit the page? – irama Aug 11 '11 at 01:14
Hi again @Gaelle - it sounds like it might be an issue with the HTML that is being rendered after the page is saved. Have you had any luck? – irama Aug 11 '11 at 01:42
the issue came from the HTML produced. Fixed now. Your solution works like a charm. Thanks a lot. I appreciate – Gaelle Aug 11 '11 at 04:05

score 3 · Answer 2 · answered Aug 10 '11 at 23:43

dont use hide from document.ready as it has to wait for the dom to load. Add an inline style="display:none;"

drop the $("#project_billing_code_id") assignments inside your if statement and use this instead as you already have access to the dom element via the event handler, use $(this).val() or this.val(). Also make your code reusable so you can call it from different scripts.

var PayRate = (function(){

    var _obj = {};

    var hideShow = function(elem){
        if($(elem).val() === '1'){
              $("#hourly").show();
            }else if($(elem).val() === '2'){
              $("#per_diem").show();    
            }else if($(elem).val() === '3'){
              $("#fixed").show();
            }else{
              $("#hourly, #fixed, #per_diem").hide();
            }
    };

    _obj.checkValue = function(){
        hideShow($('#project_billing_code_id'))
    };

    var events = function(){
        $('#project_billing_code_id').change(function(){
           hideShow(this);
        });
    };

    $(document).ready(function(){
        events ();
        checkValue ();
    });

    return _obj;

}());

I have not tested the above so you might need to make a few changes. I think you get the idea though. :)

Aamir Shahzad · Answer 3 · 2014-08-27T05:58:45.940

Working Fiddle

This is how i made this worked for me.

JS

$(document).ready(function (e) {
    $('#reasonDropDown').change(function () {
        if ($(this).val() == 'other') {
            $('.otherReasonTextBox').show();
        } else {
            $('.otherReasonTextBox').hide();
        }
    });
});

CSS

 .otherReasonTextBox {
     display:none;
 }

HTML

<select id="reasonDropDown" name="Select">
    <option>Select One</option>
    <option>Select Two</option>
    <option>Select Three</option>
    <option value="other" id="other">Other</option>
</select>
<div class="otherReasonTextBox">Other Reason Textbox</div>

score 0 · Answer 4 · edited Aug 29 '14 at 12:37

Hide and show div tag using jquery

$(document).ready(function() {

    setOptions(); // on load
    $('#Drodown_id').change(setOptions); // on change
    function setOptions() {       
        switch ($("#Drodown_id").val()) {
            case "option_1" :
                $("#div1").show();
                $('#div2').hide();
                break;
            case "option_2":
                $("#div1").hide();
                $("#div2").show();
                break;
            case "option_3":
                $("#div1").show();
                $("#div2").show();
                break;
            case "":
                $("#div1").hide();
                $("#div2").hide();
                break;
            }
    }); 
});

jQuery dropdown hide show div based on value

4 Answers4

Hide and show div tag using jquery

Linked