Manipulate elements in the same page using jQuery selectors

Question

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

Answer 1

The problem is that your selector is not "specific" enough.

So you only need to add the relevant id in $("select"), such as $('#select_container select');

Demo

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

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