php - Show/Hide Divs using jQuery and ACF -

i have dropdown list default , additional 3 options. want hide , show divs based on selection. if selection default divs should visible. otherwise based on selection, divs should show or hide. jquery code doesn't seem work. have no clue why. here code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">. </script> <script>     $(document).ready(function(){         $('#purpose').on('change', function() {             if ( this.value == '1')             {                 $(".partition").show();             }             else             {                 $(".partition").hide();             }         });     }); </script> 

and html code

<select id="purpose" style="width:33%;height:50px;border:0px;background: #dadada; font-size:x-large;">     <option selected><b>type de matériel</b></option>     <option value="1">poster</option>     <option value="2">books</option>     <option value="3">audio</option> </select> <div class="partition">     <?php the_field('poster_heading_1'); ?>     <?php          $image = get_sub_field('partition_image');         if( !empty($image) ):             ?>                 <a href="<?php the_sub_field('partition_pdf'); ?>" target="_blank">                      <img src="<?php echo $image['url']; ?>">                 </a>             <?php  the_sub_field('partition_text'); ?>         <?php endif; ?> </div> 

if understood correctly, should have 3 partition div work said, each div should have id number equals select option value want show. check code , let me if need.

jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">. </script> <script>     $(document).ready(function(){          $('#purpose').on('change', function() {              var val = $(this).val();             console.log(val);             if ( val == '0' ) {                  $(".partition").show();              } else {                  $(".partition").hide();                  $("#partition-" + val).show();              }          });      });  </script> 

html:

<select id="purpose" style="width:33%;height:50px;border:0px;background: #dadada; font-size:x-large;">     <option selected value="0"><b>type de matériel</b></option>     <option value="1">poster</option>     <option value="2">books</option>     <option value="3">audio</option>  </select>   <div class="partition" id="partition-1">     <?php the_field('poster_heading_1'); ?>     <?php      $image = get_sub_field('partition_image');     if( !empty($image) ):         ?>     <a href="<?php the_sub_field('partition_pdf'); ?>" target="_blank"> <img src="<?php echo $image['url']; ?>"> </a>     <?php  the_sub_field('partition_text'); ?> <?php endif; ?> </div>