Select option and display content related to option with JQuery-CodePudding

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" >Location 1</option>
    <option value="bar" id="location2" >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" >Info about location 1</div>
<div id="loc2" >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!

CodePudding user response：

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
});

CodePudding user response：

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.

<center>    
  <select id="changeEvent"> <!--Add an ID to your select dropdown-->
      <option value="1">Location 1</option> <!-- Give each option its own value-->
      <option value="2">Location 2</option>
      <option value="3">Location 3</option>
      <option value="4">Location 4</option>
  </select>
</center>

Then for your Divs' you could give them their own ID and add a style or class to hide them. Here I added Style="display:none" to hide them

<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>

Then 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() { /*create a change function for the select ID (changeEvent) for when user makes selection from dropdown*/
     var options = $(this).val(); /* Grab the user selection and store in a variable*/  
     if(options == '1'){    /*Check which option was selected*/ 
         $("#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();
      }
   });
 });
</script>