jQuery hide（）/ show（）可在FF / IE上运行，但不能在Chrome上运行

Question

I have a web page in which I use sql/php to create a select where options are in my database : the value of each option is the id on the database. With this, I use JQuery 3.3.1 : this is the first time I'm using it so I think my syntax might be bad.

First of all there is 2 type of datas : about price and about time. I made 2 radio button and when the "price" button is checked, the price list is shown while the time list is hidden.

This part of the code works fine on FF/IE/Chrome.

Now I want to display more informations about the option selected so I made a div for every option with style='display:none' and when the option is selected I show the div where the id of the div = the value of the option.

This part of the code works fine on FF/IE but not Chrome.

Here's my code, I replaced database calls by just writing few examples of what I can get here :

 $(document).ready(function() { $('input[type="radio"]').click(function() { if ($(this).attr("value") == "prix") { $("#prix").show('fast'); $("#temps").hide('fast'); $("#" + $(this).attr("value") + "_prix").siblings().hide('fast'); $("#" + $(this).attr("value") + "_prix").show('fast'); } if ($(this).attr("value") == "temps") { $("#prix").hide('fast'); $("#temps").show('fast'); $("#" + $(this).attr("value") + "_temps").siblings().hide('fast'); $("#" + $(this).attr("value") + "_temps").show('fast'); } }); $('input[type="radio"]').trigger('click'); }); function showDetailsCriterePrix(id) { $("#" + id + "_prix").siblings().hide('fast'); $("#" + id + "_prix").show('fast'); } function showDetailsCritereTemps(id) { $("#" + id + "_temps").siblings().hide('fast'); $("#" + id + "_temps").show('fast'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <br><br> Le critère à supprimer concerne le : <input type="radio" name="cat_critere" value="temps" required>Temps <input type="radio" name="cat_critere" value="prix" checked required>Prix <div id="prix" style="display:none"> <br><br> Choisissez un critère de prix à supprimer : <select name="idToDelPrix"> <option value="1" onclick='showDetailsCriterePrix(this.value);'>Nombre de caisses [AVE] </option> <option value="2" onclick='showDetailsCriterePrix(this.value);'>Nombre d'associés [AVE] </option> <option value="3" onclick='showDetailsCriterePrix(this.value);'>Nombre de salariés [AVE] </option> <option value="4" onclick='showDetailsCriterePrix(this.value);'>Nombre de TVA [AVE] </option> </select> <div id="wrapperPrix"> <div id="1_prix" style="display:none"> Taux prix : 175<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div> <div id="2_prix" style="display:none"> Taux prix : 100<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div> <div id="3_prix" style="display:none"> Taux prix : 100<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div> <div id="4_prix" style="display:none"> Taux prix : 1<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div> </div> </div> <div id="temps" style="display:none"> <br><br> Choisissez un critère de temps à supprimer : <select name="idToDelTemps"> <option value="1" onclick='showDetailsCritereTemps(this.value);'>Temps1 [AVE] </option> <option value="2" onclick='showDetailsCritereTemps(this.value);'>Temps2 [AVE] </option> <option value="3" onclick='showDetailsCritereTemps(this.value);'>Temps3 [AVE] </option> <option value="4" onclick='showDetailsCritereTemps(this.value);'>Temps4 [AVE] </option> </select> <div id="wrapperTemps"> <div id="1_temps" style="display:none"> Taux temps : 175<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div> <div id="2_temps" style="display:none"> Taux temps : 100<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div> <div id="3_temps" style="display:none"> Taux temps : 100<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div> <div id="4_temps" style="display:none"> Taux temps : 1<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div> </div> </div> 

I don't know why this is not working on Chrome, I tried to replace the .click by .change, I tried with and without parameters in hide()/show().

If you guys have any idea it would be very kind !

(Sorry, my code is in French but I think it's understandable even if you don't know French!)

EDIT : Answered by reporter in the comments, thank you very much !

Instead of using show()/hide() we can use toggleClass(). In this case I had to :

1- Create a css class with "display:none;"

2- Replace the style of my divs with this class

[2.5- Add an id to my selects (should have done this before) ]

3- Add an event on my selects that get the value of the selected option and toggle the class of the div with the same id.

4- Remove the now useless showDetailsCriteres functions

Answer 1

You can simply bind onchange event of dropdown rather binding onclick event to each option.

     function PrixChange(ctrl){
     var id = $(ctrl).val();
       $("#" + id + "_prix").siblings().hide('fast');
        $("#" + id + "_prix").show('fast');

    }

 <select name="idToDelPrix" onchange="PrixChange(this);">
      <option value="1" onclick='showDetailsCriterePrix(this.value);'>Nombre de caisses [AVE] </option>
      <option value="2" onclick='showDetailsCriterePrix(this.value);'>Nombre d'associés [AVE] </option>
      <option value="3" onclick='showDetailsCriterePrix(this.value);'>Nombre de salariés [AVE] </option>
      <option value="4" onclick='showDetailsCriterePrix(this.value);'>Nombre de TVA [AVE] </option>
   </select>

Answer 2

You can toggle class name defining property none. You can try .on event instead of .click event