I tried to add two selectors using JQuery but the content is not showing up, if I add only one selector then it works fine so can you please help me to solve this problem, below is the code the idea of this script is to display the fuel price (Fuel and Diesel), there are 3 types of fuel and 1 type of diesel. The first selector shows the price by numbers and the second selector shows the price chart by month. jQuery(function($){varselects=$('select');varvalues='';selects.ea

Manipulate elements in the same page using jQuery selectors-PHP Chinese Network Q&A

I tried to add two selectors using JQuery, but the content was not displayed. If I only add one selector, then it works fine, so please help me solve this problem. Here is the code

The idea of this script is to display fuel prices (fuel and diesel), there are 3 types of fuel and 1 type of diesel The first selector shows the prices by numbers and the second selector shows the price chart by months.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <div id="select_container">
    <select id="SelectOne">
      <option value="Fuel">Fuel</option>
      <option value="Diesel">Diesel</option>
    </select>

    <select id="SelectTwo">
      <option value="E-Plus-91">E-Plus 91</option>
      <option value="Special-95">Special 95</option>
      <option value="Super-98">Super 98</option>
    </select>

    <select id="SelectThree">
      <option value="Liter">Liter</option>
      <option value="Galon">Galon</option>
    </select>
  </div>

  <div id="results_container" class="result">
    <div class="Fuel E-Plus-91 Liter">3.22 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-16.15%</span></div>
    <div class="Fuel Special-95 Liter">3.30 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.82%</span></div>
    <div class="Fuel Super-98 Liter">3.41 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.38%</span></div>
    <div class="Fuel E-Plus-91 Galon">12.24 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-16.15%</span></div>
    <div class="Fuel Special-95 Galon">12.54 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.82%</span></div>
    <div class="Fuel Super-98 Galon">12.96 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.38%</span></div>
    <div class="Diesel Special-95 Super-98 E-Plus-91 Liter">3.87 AED <i class="arrow top"></i><span class="dif">-0.27</span><span class="difp">-6.52%</span></div>
    <div class="Diesel Special-95 Super-98 E-Plus-91 Galon">14.71 AED <i class="arrow top"></i><span class="dif">-1.03</span><span class="difp">-6.52%</span></div>
    <div></div>
  </div>
</center>

<center>
  <div id="select_chart">
    <select id="SelectOne1">
      <option value="cFuel">Fuel</option>
      <option value="cDiesel">Diesel</option>
    </select>

    <select id="SelectTwo1">
      <option value="cLiter">Liter</option>
      <option value="cGalon">Galon</option>
    </select>
  </div>

  <div id="results_chart" class="result">
    <div class="cFuel cLiter">[visualizer id="36" lazy="no" class=""]</div>
    <div class="cFuel cGalon">[visualizer id="39" lazy="no" class=""]</div>
    <div class="cDiesel cLiter">[visualizer id="43" lazy="no" class=""]</div>
    <div class="cDiesel cGalon">[visualizer id="48" lazy="no" class=""]</div>
    <div></div>
  </div>
</center>

You can check it on my website oileprice.ae

I am using WordPress platform

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