How to use jQuery hide and show effect when using select option

Question

i got one more doubt im close to the answer but not getting it to worked, Actually i have the a default input text & default drop-down(drop-down which consist of west Bengal & others). NOW if some one click's on the west Bengal state under drop-down then the default input should get hide and the west Bengal drop-down should get displayed.Below is the code what i have tried.can any one please guideme a bit new to jQuery.

thanks!!

                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
                                                        <option value="" disabled="" selected="">Select State</option>
                                                        <option value="WestBengal">West Bengal</option>
                                                        <option value="Others">Others</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group otherdistricts">
                                                    <input class="form-control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District"  autocomplete="false">
                                                </div>

                                                <div class="westbengaldistrict"  style="display:none"> 
                                                    <select class="form-control" name="district" id="district" autocomplete="false">
                                                        <option value="" selected disabled>Select Your District</option>
                                                        <option value="Alipurduar">Alipurduar</option>
                                                        <option value="Bankura">Bankura</option>
                                                        <option value="PaschimBardhaman">Paschim Bardhaman</option>
                                                        <option value="PurbaBardhaman">Purba Bardhaman</option>
                                                        <option value="Birbhum">Birbhum</option>
                                                        <option value="CoochBehar">Cooch Behar</option>
                                                        <option value="Darjeeling">Darjeeling</option>
                                                        <option value="UttarDinajpur">Uttar Dinajpur</option>
                                                        <option value="DakshinDinajpur">Dakshin Dinajpur</option>
                                                        <option value="Hooghly">Hooghly</option>
                                                        <option value="Howrah">Howrah</option>
                                                        <option value="Jalpaiguri">Jalpaiguri</option>
                                                        <option value="Jhargram">Jhargram</option>
                                                        <option value="UttarDinajpur">Uttar Dinajpur</option>
                                                        <option value="Kalimpong">Kalimpong</option>
                                                        <option value="Malda">Malda</option>
                                                        <option value="PaschimMedinipur">Paschim Medinipur</option>
                                                        <option value="PurbaMedinipur">Purba Medinipur</option>
                                                        <option value="Murshidabad">Murshidabad</option>
                                                        <option value="Nadia">Nadia</option>
                                                        <option value="North24Parganas">North 24 Parganas</option>
                                                        <option value="South24Parganas">South 24 Parganas</option>
                                                        <option value="Purulia">Purulia</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <script>
                                                 $(document).ready(function(){
                                                     $("#state").on("select",function() {
                                                         if ($(this).val() === "WestBengal") {
                                                            $(".otherdistricts").hide();
                                                            $(".westbengaldistrict").show();
                                                        }
                                                     });
                                                 });
                                            </script>

Possible duplicate of [show/hide div based on select option jquery](https://stackoverflow.com/questions/2975521/show-hide-div-based-on-select-option-jquery) — Sumit Patel, Jul 24 '19 at 08:02
Looks answer bellow, I tried to make a snippet with your code to test it and you have error : in the script part, the last 3 `)}` should be `})` — Mickaël Leger, Jul 24 '19 at 08:23

score 1 · Accepted Answer · answered Jul 24 '19 at 08:21

You have errors in the jquery code. Use the below code, it is working fine and tested.

<script>

           $(document).ready(function(){
              $("select").change(function(){
                    $( "select option:selected").each(function(){
                        //enter bengal districts
                        if($(this).attr("value")=="WestBengal"){
                            $(".enterotherstates").hide();
                            $(".enterbengaldistricts").show();
                        }
                        //enter other states
                        if($(this).attr("value")=="Others"){
                            $(".enterbengaldistricts").hide();
                            $(".enterotherstates").show();
                        }
                    });
                });  
            }); 

        </script>

** Please check the updated Jquery code in my answer below ** [https://stackoverflow.com/a/57184080/10972183](https://stackoverflow.com/a/57184080/10972183) — Santosh Kumar, Jul 24 '19 at 13:47

ThisisFish · Answer 2 · 2019-07-24T11:44:55.833

0

answer to your updated question

$(document).ready(function(){
$(".westbengaldistrict").hide(); // first hide the select
$("#state").on("change",function() {
       if ($(this).val() === "WestBengal") {
          $(".otherdistricts").hide();
          $(".westbengaldistrict").show(); // show on change
      }
   });
});

edited Jul 24 '19 at 11:44

answered Jul 24 '19 at 08:21

ThisisFish

287
4
11

i have edited my question please can u guide me a bit – Amit Jul 24 '19 at 11:23
you should use on(" change ") not on(" select "). let me know if it solve your problem. – ThisisFish Jul 24 '19 at 11:40

score 0 · Answer 3 · answered Jul 24 '19 at 08:23

Your closing parentheses and brackets are the other way around in your javaScript code.

Should be like this

$(document).ready(function () { code here });

But you have

$(document).ready(function () { code here )};

Try this

 <script>
      $(document).ready(function () {
        $("select").change(function () {
          $("select option:selected").each(function () {
            //enter bengal districts
            if ($(this).attr("value") == "WestBengal") {
              $(".enterotherstates").hide();
              $(".enterbengaldistricts").show();
            }
            //enter other states
            if ($(this).attr("value") == "Others") {
              $(".enterbengaldistricts").hide();
              $(".enterotherstates").show();
            }
          });
      });
    });
</script>

i have edited my question please can u guide me a bit – Amit Jul 24 '19 at 11:24 — Amit, Jul 24 '19 at 11:24

Rajesh · Answer 4 · 2019-07-24T08:32:10.703

0

$(document).ready(function () {
  $("select").change(function () {
    if ($(this).val() === "WestBengal") {
      $(".enterotherstates").hide();
      $(".enterbengaldistricts").show();
    }
    else {
      $(".enterbengaldistricts").hide();
      $(".enterotherstates").show();
    }
  });
});

Your code has error. Your code is:

$(document).ready(function())};

Change to:

$(document).ready(function()});

Since select is a form element you can right use val() method instead of $(this).attr("value") to get value.

edited Jul 24 '19 at 08:32

answered Jul 24 '19 at 08:23

Rajesh

123
1
3
14

i have edited my question please can u guide me a bit – Amit Jul 24 '19 at 11:23

score 0 · Answer 5 · answered Jul 24 '19 at 08:33

You have several issues in your code. First of all, your closing brackets are wrong. You should have )}; instead of });

Your inputfield has display: none, you should remove that, because $(".enterotherstates").show(); won't let it appear, only the parent element.

Next, you don't need to iterate with each. It's easier and faster to use $(this).

$(document).ready(function() {
    $("select").change(function() {
        if ($(this).val() === "WestBengal") {
            $(".enterotherstates").hide();
            $(".enterbengaldistricts").show();
        } else {
            $(".enterbengaldistricts").hide();
            $(".enterotherstates").show();
        }

    });
});

Optional performance advice

you could make your code faster by caching your jQuery objects and reuse them. So the browser doesn't have to search the complete HTML again and again:

$(document).ready(function() {

    var otherStates = $(".enterotherstates");
    var bengal = $(".enterbengaldistricts");

    $("select").change(function() {
        if ($(this).val() === "WestBengal") {
            otherStates.hide();
            bengal.show();
        } else {
            bengal.hide();
            otherStates.show();
        }

    });
});

i have edited my question please can u guide me a bit – Amit Jul 24 '19 at 11:24 — Amit, Jul 24 '19 at 11:24

score 0 · Answer 6 · answered Jul 24 '19 at 13:27

Below is the updated jquery code as per the updated question. It is working fine and tested.

 $(document).ready(function(){
 $("#state").change(function() {
         if ($(this).val() === "WestBengal") {
            $(".otherdistricts").hide();
            $(".westbengaldistrict").show();
        }else{
           $(".otherdistricts").show();
            $(".westbengaldistrict").hide();
        }
     });
 });

How to use jQuery hide and show effect when using select option

6 Answers6