Select option and display content related to option with JQuery

Question

this is my first question and after grinding through several threads on here I am still completely lost and can't find a proper solution to my problem.

What I want to do?
A select Box with various options, each options is connected with a JQuery script which makes a related div visible when selected.

<center>    
<select onclick="changeview()">
    <option value="foo" id="location1" class="ticketbuttons my_active">Location 1</option>
    <option value="bar" id="location2" class="ticketbuttons">Location 2</option>
</select>
</center>

When you switch between the options, I want specific DIVs to appear or not appear by this script

<script>
jQuery( document ).ready(function() {
   jQuery( "#location1" ) function changeview() {
        jQuery(".changing_ticket").hide();
            jQuery("#loc1").fadeToggle();
            jQuery(".ticketbuttons").removeClass("my_active");
            jQuery("#location1").addClass("my_active");
            alert('Hello1');
     });
        
        jQuery( "#location2" ) function changeview() {
        jQuery(".changing_ticket").hide();
            jQuery("#loc2").fadeToggle();
            jQuery(".ticketbuttons").removeClass("my_active");
            jQuery("#location2").addClass("my_active");
            alert('Hello2');
     });
        
        jQuery( "#location3" ) function changeview() {
        jQuery(".changing_ticket").hide();
            jQuery("#loc3").fadeToggle();
            jQuery(".ticketbuttons").removeClass("my_active");
            jQuery("#location3").addClass("my_active");
            alert('Hello3');
     });
        
        jQuery( "#location4" ) function changeview() {
        jQuery(".changing_ticket").hide();
            jQuery("#loc4").fadeToggle();
            jQuery(".ticketbuttons").removeClass("my_active");
            jQuery("#location4").addClass("my_active");
            alert('Hello4');
     });
});
</script>

and last but not least the frontend output

<div id="loc1" class="change_ticket">Info about location 1</div>
<div id="loc2" class="change_ticket hidden">Info about location 2</div>

I have read about several options like change, onselect, on("change", function () .. and tested but nothin really worked for me.

Hope someone can help me! Thanks in advance!

Answer 1

You could try something like this. Create a variable to store the value of the select dropdown ID & then check which option is selected and hide() the other values and display only the one necessary.

<!--  original dropdown. Replaced by updated for loops in PHP
<center>   
  <select id="changeEvent"> 
       <option value="1">Location 1</option>
       <option value="2">Location 2</option> 
       <option value="3">Location 3</option>
       <option value="4">Location 4</option>  
  </select>
</center>
-->

<!-- Changes made for dynamic option list-->
<!--Add a data attribute for counter to pass to your jquery loop--> 
<center>
<!-- Counter used for creating number of necessary options-->
<?php $counter = 20;?> 
<select id="changeEvent" data-counter-id="<?php echo $counter;?>">
    <?php
     for($i = 1;$i <= $counter; $i++){
    ?>
        <option value="<?php echo $i;?>">Location <?php echo $i;?></option>
    <?php
     }
    ?>
 </select>
 </center>

Your divs use the same counter variable

   <!-- Original divs. Replaced by for loop to create dynamic option list
   <div id="loc1>" style="display:none;">Info about location 1</div>
   <div id="loc2>" style="display:none;">Info about location 2</div>
   <div id="loc3>" style="display:none;">Info about location 3</div> 
   <div id="loc4>" style="display:none;">Info about location 4</div>
   -->

  <?php
   for($x = 1;$x <= $counter; $x++){
  ?>   
    <div id="loc<?php echo $x?>" style="display:none;">Info about location <?php echo $x?></div>
  <?php
   }
  ?>

In your jQuery function you could add an on('change') event instead of inline on your select dropdown & grab the value of the Select option list and do a check to see which one was selected and display the appropriate DIV. Add a fadeIn() to the item you want to show()

<script>
 $(document).ready(function() {
     $("#changeEvent").on('change', function() { 

        /*Original code
           var options = $(this).val();
           if(options == '1'){
               $("#loc1).fadeIn('slow').show();
               $("#loc2).hide();
               $("#loc3).hide();
               $("#loc4).hide();
           }else if(options == '2'){
               $("#loc1).hide();
               $("#loc2).fadeIn('slow').show();
               $("#loc3).hide();
               $("#loc4).hide();
           }else if(options == '3'){
               $("#loc1).hide();
               $("#loc2).hide();
               $("#loc3).fadeIn('slow').show();
               $("#loc4).hide();
           }else{
               $("#loc1).hide();
               $("#loc2).hide();
               $("#loc3).hide();
               $("#loc4).fadeIn('slow').show();
           }
          
        */
        
        /* This will loop through options and display the selected*/
        var options = $(this).val();
        var counter = $(this).data("counter-id");

        for(let i = 1; i <= counter; i++){
            if(options != i){
                 $("#loc" + i).hide();
            }else{              
                $("#loc" + options).fadeIn('slow').show();
            }
        }
     });
  });
 </script>   

Answer 2

Try using onchange instead of onclick on the select tag

<select onchange="changeview()"></select>

or you could try putting ID on the select tag and do some jQuery

<select id="selectOption"></select>

jQuery

$(document).on('change','#selectOption', function () {
    // DO THINGS HERE
});