11

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();
       }
  });
});
1
  • 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, 2011 at 23:23

4 Answers 4

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!

5
  • 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 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, 2011 at 1: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, 2011 at 1: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, 2011 at 1: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, 2011 at 1:42
  • the issue came from the HTML produced. Fixed now. Your solution works like a charm. Thanks a lot. I appreciate
    – Gaelle
    Aug 11, 2011 at 4:05
3

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. :)

1

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>
0

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;
            }
    }); 
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.