How to use jQuery hide effect in select option

Question

I got one more doubt I'm 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 someone 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 I'm a bit new to jQuery.

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> 

Answer 1

'select' is not the jQuery event you are expecting. It is related to text selectiongs in text inputs and text areas. You should use 'change' instead for when the value of the select field changes.

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> 

Answer 2

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>