Blättern Sie zu div beim Klicken auf Wert in Wählen Sie

Question

Wie kann ich zu einem entsprechenden div beim Klicken auf einen Wert in einem Dropdown-Menü wählen?

ich in den Dienstnamen über Wordpress bin ziehen und in der Dropdown-Liste auf dem Wert Füllung:

<select> 
    <?php if(get_field('services')){ ?> 
     <?php while(the_repeater_field('services')): 
     $service = get_sub_field('service_name'); 
     $string = str_replace(' ', '', $service); ?> 
      <option value="<?php echo $string; ?>"><?php the_sub_field('service_name'); ?></option> 
     <?php endwhile; ?> 
    <?php } ?>          
</select> 

Hier ist die divs unten - was in der Auswahl Dropdown-IDs auf den Wert des passenden oben haben sollte.

<?php if(get_field('services')){ ?> 
    <?php while(the_repeater_field('services')): 
    $service = get_sub_field('service_name'); 
    $string = str_replace(' ', '', $service); ?> 
     <section class="row service equal" id="<?php echo $string; ?>"> 
      <div class="columns medium-3"> 
       <img src="<?php the_sub_field('service_image'); ?>" /> 
      </div> 

      <div class="columns medium-6 flex-center"> 
       <h3><?php the_sub_field('service_name'); ?></h3> 
       <?php the_sub_field('service_description'); ?> 
      </div> 

      <div class="columns medium-3 flex-center"> 
       <?php if(get_sub_field('strapline') != "") { ?> 
        <p class="cta-highlight"><span><?php the_sub_field('strapline'); ?></span></p> 
       <?php } ?> 
       <a class="inner-button" href="<?php the_sub_field('call_to_action_link'); ?>"> 
        <?php the_sub_field('call_to_action_text'); ?> > 
       </a> 
      </div> 
    </section> 
    <?php endwhile; ?> 
<?php } ?> 

Answer 1

die ID Ihres wählen Unter der Annahme selectID, Sie so etwas tun könnte:

<script> 
    $(document).ready(function() { //When the page loads 

    $('#selectID').change(function() { //Initialize "On Select Change" listener 
     var val = $(this).val(); //Get the value of the select 
     $('html, body').animate({ //Animate the page scroll 
     scrollTop: $("#"+val).offset().top //scroll to div with the same ID as the selected value 
     }, 2000); //Animation length in MS: 2000 = 2 seconds 
    }); 
    }); 
</script>