Manipuler des éléments dans la même page à l'aide des sélecteurs jQuery-Questions et réponses sur le réseau chinois PHP

J'ai essayé d'ajouter deux sélecteurs en utilisant JQuery, mais le contenu ne s'affiche pas, si j'ajoute un seul sélecteur, alors cela fonctionne bien, alors aidez-moi à résoudre ce problème, voici le code

L'idée de ce script est d'afficher les prix des carburants (carburant et diesel), il existe 3 types de carburant et 1 type de diesel Le premier sélecteur affiche les prix par numéros et le deuxième sélecteur affiche le tableau des prix par mois.

jQuery(function($) { var selects = $('select'); var values = ''; selects.each(function() { values += '.' + $(this).val(); }); $(values).show(); $('select').on('change', function(index, value) { if ($('#SelectOne').val() == 'Diesel') { $('#SelectTwo').prop('disabled', true); } else { $('#SelectTwo').prop('disabled', false); } $('#results_container > div').hide(); var values = ''; selects.each(function() { values += '.' + $(this).val(); }); $(values).show(); }); }); jQuery(function($) { var selects = $('select'); var values = ''; selects.each(function() { values += '.' + $(this).val(); }); $(values).show(); $('select').on('change', function(index, value) { $('#results_chart > div').hide(); var values = ''; selects.each(function() { values += '.' + $(this).val(); }); $(values).show(); }); });

#results_container>div, #results_chart>div { display: none; } .result { padding-top: 10px; } .dif, .difp { display: inline; padding-left: 15px; color: red; } .arrow { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); border: solid Red; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; margin-left: 10px; }

      
  3.22 AED -0.62-16.15%
 3.30 AED -0.62-15.82%
 3.41 AED -0.62-15.38%
 12.24 AED -2.36-16.15%
 12.54 AED -2.36-15.82%
 12.96 AED -2.36-15.38%
 3.87 AED -0.27-6.52%
 14.71 AED -1.03-6.52%
 
 
      
  [visualizer id="36" lazy="no" class=""]
 [visualizer id="39" lazy="no" class=""]
 [visualizer id="43" lazy="no" class=""]
 [visualizer id="48" lazy="no" class=""]

Vous pouvez le vérifier sur mon site oileprice.ae

J'utilise la plateforme WordPress

jQuery(function($) { var selects = $('#select_container select'); var values = ''; selects.each(function() { values += '.' + $(this).val(); }); $(values).show(); $('#select_container select').on('change', function(index, value) { if ($('#SelectOne').val() == 'Diesel') { $('#SelectTwo').prop('disabled', true); } else { $('#SelectTwo').prop('disabled', false); } $('#results_container > div').hide(); var values = ''; selects.each(function() { values += '.' + $(this).val(); }); $(values).show(); }); }); jQuery(function($) { var selects = $('#select_chart select'); var values = ''; selects.each(function() { values += '.' + $(this).val(); }); $(values).show(); $('#select_chart select').on('change', function(index, value) { $('#results_chart > div').hide(); var values = ''; selects.each(function() { values += '.' + $(this).val(); }); $(values).show(); }); });

#results_container>div, #results_chart>div { display: none; } .result { padding-top: 10px; } .dif, .difp { display: inline; padding-left: 15px; color: red; } .arrow { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); border: solid Red; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; margin-left: 10px; }