用 Javascript 选择的 3 个 forms 显示内容

Question

我尝试创建脚本来显示阿联酋的燃料和柴油价格我们有 3 种燃料和 1 种柴油，我还想显示字母和加仑的价格

所以我尝试这样做，但我在柴油机中遇到问题请检查以下内容

 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>

你能帮我修复并完成它吗？ 问题我想在我 select 柴油后禁用第二种形式并在 HTML 中显示最后两行

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

谢谢

Answer 1

我认为，如果继续这种方式，您可以让 Diesel 匹配所有标记....这不是一个好的解决方案，但遵循最初的方式。 其他方法是在 select 第一个选项时进行命名并更改它们的选项。

 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>