select and click option with jquery

Question

hi guys i have one select and many options and many frag .. ineed chose one option and in body 2 frag goes display : none; but i cant do it plz help me:

i know this code is wrong but icant find code for this work:

help me thanks

   `<select id="`myselect`">
<option class="`ukk`" value="1">uk</option>
<option class="usaa" value="2">usa</option>
<option class="euu" value="3">eu</option>
</select>

<div id="frag1">uk frag</div>
<div id="frag2">usa frag</div>
<div id="frag3">eu frag</div>

$('.ukk').click(function(){
  $('#frag2').hide();
})` 

Answer 1

1. Add onchange event on select
2. Compare class name and hide

 $("select").on("change", function(){ if($(this).find("option:selected").hasClass("ukk")){ $("#frag2").hide(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="myselect"> <option class="ukk" value="1">uk</option> <option class="usaa" value="2">usa</option> <option class="euu" value="3">eu</option> </select> <div id="frag1">uk frag</div> <div id="frag2">usa frag</div> <div id="frag3">eu frag</div>

Answer 2

You can do on your select a on change event handler and then check which option is selected

so in your Jquery script it's

$('#myselect').change(function(){
    switch($('#myselect :selected').attr('class')){
        case "ukk":
            //do what ever you want
            break;
        case ...
    }
});

Hopefully this helps

Answer 3

You need to listen to the event on change of myselect , then check class to do something as you wish like below.

 $('#myselect').on("change", function(){ var className = $(this).find("option:selected").attr("class"); $(".frag").show(); console.log(".frag_" + className); $(".frag_" + className).hide(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="myselect"> <option class="ukk" value="1">uk</option> <option class="usaa" value="2">usa</option> <option class="euu" value="3">eu</option> </select> <div class="frag frag_ukk" >uk frag</div> <div class="frag frag_usaa" >usa frag</div> <div class="frag frag_euu" >eu frag</div>

Answer 4

I think thats the logic your looking for?

 $('body').on('change', '#myselect', function () { $('#frag1, #frag2, #frag3').css('display', 'none'); if ($(this).val()=='1') { $('#frag1').css('display', 'inherit'); } else if($(this).val()=='2') { $('#frag2').css('display', 'inherit'); } else if($(this).val()=='3') { $('#frag3').css('display', 'inherit'); } else { $('#frag1, #frag2, #frag3').css('display', 'inherit'); } } );

 <select id="myselect"> <option>Choose one...</option> <option class="ukk" value="1">uk</option> <option class="usaa" value="2">usa</option> <option class="euu" value="3">eu</option> </select> <div id="frag1">uk frag</div> <div id="frag2">usa frag</div> <div id="frag3">eu frag</div>