2 Selector by jQuery in same page-CodePudding

I tried add 2 Selector by JQuery but it's not display the content, if I added just one it's work fine so could you please help me to fix this issue the following is codes

the idea of this script display the oil price (fuel & Diesel) 3 types of fuel and 1 of diesel the first selector is display the prices by number then the second one display the charts of prices by month.

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" >
    <div >3.22 AED <i ></i><span >-0.62</span><span >-16.15%</span></div>
    <div >3.30 AED <i ></i><span >-0.62</span><span >-15.82%</span></div>
    <div >3.41 AED <i ></i><span >-0.62</span><span >-15.38%</span></div>
    <div >12.24 AED <i ></i><span >-2.36</span><span >-16.15%</span></div>
    <div >12.54 AED <i ></i><span >-2.36</span><span >-15.82%</span></div>
    <div >12.96 AED <i ></i><span >-2.36</span><span >-15.38%</span></div>
    <div >3.87 AED <i ></i><span >-0.27</span><span >-6.52%</span></div>
    <div >14.71 AED <i ></i><span >-1.03</span><span >-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" >
    <div >[visualizer id="36" lazy="no" ]</div>
    <div >[visualizer id="39" lazy="no" ]</div>
    <div >[visualizer id="43" lazy="no" ]</div>
    <div >[visualizer id="48" lazy="no" ]</div>
    <div></div>
  </div>
</center>

you can check it in my website oileprice.ae

I'm using Wordpress platform

CodePudding user response：

Problem is that your selectors is not "specific" enough.

So all you have to do is to add the relevant id to the $("select") like $('#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" >
    <div >3.22 AED <i ></i><span >-0.62</span><span >-16.15%</span></div>
    <div >3.30 AED <i ></i><span >-0.62</span><span >-15.82%</span></div>
    <div >3.41 AED <i ></i><span >-0.62</span><span >-15.38%</span></div>
    <div >12.24 AED <i ></i><span >-2.36</span><span >-16.15%</span></div>
    <div >12.54 AED <i ></i><span >-2.36</span><span >-15.82%</span></div>
    <div >12.96 AED <i ></i><span >-2.36</span><span >-15.38%</span></div>
    <div >3.87 AED <i ></i><span >-0.27</span><span >-6.52%</span></div>
    <div >14.71 AED <i ></i><span >-1.03</span><span >-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" >
    <div >[visualizer id="36" lazy="no" ]</div>
    <div >[visualizer id="39" lazy="no" ]</div>
    <div >[visualizer id="43" lazy="no" ]</div>
    <div >[visualizer id="48" lazy="no" ]</div>
    <div></div>
  </div>
</center>

Only one change request that will work for both.

jQuery(function($) {
  $('select').on('change', function(index, value) {
    var container = $(this).parent();
    if ($('#SelectOne',container).val() == 'Diesel') {
      $('#SelectTwo',container).prop('disabled', true);
    } else {
      $('#SelectTwo',container).prop('disabled', false);
    }
    container.next('.result').find('div').hide();
    var values = '';
    container.find("select").each(function() {
      values  = '.'   $(this).val();
    });
    $(values).show();
  }).trigger("change");
});

#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" >
    <div >3.22 AED <i ></i><span >-0.62</span><span >-16.15%</span></div>
    <div >3.30 AED <i ></i><span >-0.62</span><span >-15.82%</span></div>
    <div >3.41 AED <i ></i><span >-0.62</span><span >-15.38%</span></div>
    <div >12.24 AED <i ></i><span >-2.36</span><span >-16.15%</span></div>
    <div >12.54 AED <i ></i><span >-2.36</span><span >-15.82%</span></div>
    <div >12.96 AED <i ></i><span >-2.36</span><span >-15.38%</span></div>
    <div >3.87 AED <i ></i><span >-0.27</span><span >-6.52%</span></div>
    <div >14.71 AED <i ></i><span >-1.03</span><span >-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" >
    <div >[visualizer id="36" lazy="no" ]</div>
    <div >[visualizer id="39" lazy="no" ]</div>
    <div >[visualizer id="43" lazy="no" ]</div>
    <div >[visualizer id="48" lazy="no" ]</div>
    <div></div>
  </div>
</center>