Display The Content with 3 Selected forms by Javascript - Jquery

Rawaf
September 12, 2022
58 views
0 votes
2 Answers

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

Answers

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Display The Content with 3 Selected forms by Javascript – Jquery

Answers