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

I think, you can just make Diesel to match all marks, if continue this way.... it not good solution, but follows initial way. Other way is to make selects named and change their, options when select first one.

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

Answer 2

 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>