0

Hi I write some code to hide and show some based on the selected dropdown option. Here are my codes:

(function ($){$(document).ready(function() {
    $( '#Drodown_id' ).change(function(){       
        switch ($(this).val()) {
        case "option_1" :
          $("#div1").show();
          $('#div2').hide();
          break;
        case "option_2":
          $("#"div2").show();
          $("#div1").hide();
          break;
        case "option_3":
          $("#"div2").show();
          $("#div1").show);
          break;
        case "":
          $("#div1").hide();
          $("#div2").hide();
          break;
         }
      }); });})(jQuery);

However, every time I open/refresh the page, both div1 and div2 will showed up, regardless the selected option is option_1, option_2 and even null. The problem only occurred when the page is new/refresh.

Is there any problem on my codes??

2
  • There are several erroneous double quotes in your code - are they typos? Apr 3, 2012 at 15:06
  • Yes,it was the typos. Sorry for not double check my codes before posting.
    – dev-jim
    Apr 4, 2012 at 19:24

5 Answers 5

0

Firstly there are several extra double quotes in your code which would prevent it from working. Secondly, you have only told this code to execute when the select is changed. Try this:

$(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;
            }
    }); 
})
1
  • Yes, your codes is right. Sorry for the mess at my code, I was too hurry to post the question that I forgot double check my code. However, thanks for your guys help.
    – dev-jim
    Apr 4, 2012 at 19:21
0

Set

#div1, #div2{display: none;}

in your CSS. This will hide both elements on page load and the change event will trigger the correct element to display.

0
0

Well, apart from the random "'s and missing ('s in your code (seriously, inspect your code), what is the display-mode you give your div's in css?

When your page is loaded, the chage-event of the dropdown is NOT fired, because it hasn't been changed by the user. So you'll have to set the display to "none" in css for the div's you don't want to be visible at load yourself.

0

Your code will not activate until the #Drodown_id object is changed (because you use the jQuery-function change). So when the page loads, nothing is done with the objects you want to hide/show. Try using CSS to hide #div1 and #div2:

#div1, #div2 { display:none; }

0

set the divs via css to have

display:none;

via css or inline(css is better).

also, you should use the javascript concatenator if you really need to have separate strings added, ie:$('#'div2) should be$('#'+'div2') but you really can just do like you already did $('#div2')

4
  • If the display property is not set to "none", both elements will be visible until the change event is fired.
    – Joe
    Apr 3, 2012 at 15:08
  • because his code is an event handler and hes not binding it to page load so the hide in his switch case doesn't fire until 'onchange' event fires.
    – Rooster
    Apr 3, 2012 at 15:10
  • Exactly, so he needs to bind his function on load as well. Simply making all the div elements invisible on load will mean he may have option_3 persisted in the select (which should show both divs), yet because of the CSS it will show neither. Apr 3, 2012 at 15:13
  • tomato tomaughto. the css display:none will be overridden by his code as soon as it fires as the jquery hide and show commands insert there style commands into the DOM as inline style elements which supercede the css. either way will work.
    – Rooster
    Apr 3, 2012 at 15:17

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.