Display The Content with 3 Selected forms by Javascript

Question

I tried Create script to display Fuel and Diesel Prices in UAE we have 3 types of fuel and 1 type of Diesel also I want display the price for letter and Gallon

So I tried do it but I had problems in Diesel please check the following

jQuery(function($){

    var
        selects = $('#select_container select'),
        results = $('#results_container > div');
        
    selects.change(function(){        
        var values = '';
        selects.each(function(){
            values += '.' + $(this).val();
        });        
        results.filter(values).show().siblings().hide();
    });
    
});

#results_container > div { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='select_container'>
        <select>
            <option value='Fuel'>Fuel</option>    
            <option value='Diesel'>Diesel</option>
        </select>
        
        <select>
            <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>
            <option value='Letter'>Letter</option> 
            <option value='Galon'>Galon</option>
        </select>
    </div>
    
    <div id='results_container'>
        <div class='Fuel E-Plus-91 Letter'>3.22 AED</div>
        <div class='Fuel Special-95 Letter'>3.30 AED</div>
        <div class='Fuel Super-98 Letter'>3.41 AED</div>
         <div class='Fuel E-Plus-91 Galon'>12.24 AED</div>
        <div class='Fuel Special-95 Galon'>12.54 AED</div>
        <div class='Fuel Super-98 Galon'>12.96 AED</div>
        <div class='Diesel Letter'>3.87 AED</div>
        <div class='Diesel Galon'>14.71 AED</div>
    <div>

Could you please help me for fix and complete it ? the problem I want disable the second form after I select the diesel and display the last 2 lines in HTML

<div class='Diesel Letter'>3.87 AED</div>
    <div class='Diesel Galon'>14.71 AED</div>

thanks

Answer 1

var selects = $('select');
var values = '';
selects.each(function(){
    values += '.' + $(this).val();
});
$(values).show();
$('select').on('change',function(index,value){
  if($(this).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();
});

#results_container > div { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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='Letter'>Letter</option> 
            <option value='Galon'>Galon</option>
        </select>
    </div>
    
    <div id='results_container'>
        <div class='Fuel E-Plus-91 Letter'>3.22 AED</div>
        <div class='Fuel Special-95 Letter'>3.30 AED</div>
        <div class='Fuel Super-98 Letter'>3.41 AED</div>
         <div class='Fuel E-Plus-91 Galon'>12.24 AED</div>
        <div class='Fuel Special-95 Galon'>12.54 AED</div>
        <div class='Fuel Super-98 Galon'>12.96 AED</div>
        <div class='Diesel Special-95 Super-98 E-Plus-91 Letter'>3.87 AED</div>
        <div class='Diesel Special-95 Super-98 E-Plus-91 Galon'>14.71 AED</div>
    <div>

var selects = $('select');
$('select').on('change',function(){
  $('#results_container > div').hide();
  var values = '';
  selects.each(function(){
      values += '.' + $(this).val();
  }); 
  $(values).show();
});

#results_container > div { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='select_container'>
        <select>
            <option value='Fuel'>Fuel</option>    
            <option value='Diesel'>Diesel</option>
        </select>
        
        <select>
            <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>
            <option value='Letter'>Letter</option> 
            <option value='Galon'>Galon</option>
        </select>
    </div>
    
    <div id='results_container'>
        <div class='Fuel E-Plus-91 Letter'>3.22 AED</div>
        <div class='Fuel Special-95 Letter'>3.30 AED</div>
        <div class='Fuel Super-98 Letter'>3.41 AED</div>
         <div class='Fuel E-Plus-91 Galon'>12.24 AED</div>
        <div class='Fuel Special-95 Galon'>12.54 AED</div>
        <div class='Fuel Super-98 Galon'>12.96 AED</div>
        <div class='Diesel Special-95 Super-98 E-Plus-91 Letter'>3.87 AED</div>
        <div class='Diesel Special-95 Super-98 E-Plus-91 Galon'>14.71 AED</div>
    <div>