我尝试使用JQuery添加了两个选择器,但是内容没有显示出来,如果只添加一个选择器,那么它可以正常工作,所以请你帮我解决这个问题,以下是代码
这个脚本的想法是显示燃油价格(燃料和柴油),有3种类型的燃料和1种柴油 第一个选择器按数字显示价格,第二个选择器按月份显示价格图表。
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" class="result">
<div class="Fuel E-Plus-91 Liter">3.22 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-16.15%</span></div>
<div class="Fuel Special-95 Liter">3.30 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.82%</span></div>
<div class="Fuel Super-98 Liter">3.41 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.38%</span></div>
<div class="Fuel E-Plus-91 Galon">12.24 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-16.15%</span></div>
<div class="Fuel Special-95 Galon">12.54 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.82%</span></div>
<div class="Fuel Super-98 Galon">12.96 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.38%</span></div>
<div class="Diesel Special-95 Super-98 E-Plus-91 Liter">3.87 AED <i class="arrow top"></i><span class="dif">-0.27</span><span class="difp">-6.52%</span></div>
<div class="Diesel Special-95 Super-98 E-Plus-91 Galon">14.71 AED <i class="arrow top"></i><span class="dif">-1.03</span><span class="difp">-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" class="result">
<div class="cFuel cLiter">[visualizer id="36" lazy="no" class=""]</div>
<div class="cFuel cGalon">[visualizer id="39" lazy="no" class=""]</div>
<div class="cDiesel cLiter">[visualizer id="43" lazy="no" class=""]</div>
<div class="cDiesel cGalon">[visualizer id="48" lazy="no" class=""]</div>
<div></div>
</div>
</center>
你可以在我的网站oileprice.ae上检查它
我使用的是WordPress平台
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
问题是你的选择器不够“具体”。
所以你只需要在
$("select")中添加相关的id,比如$('#select_container select');演示
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" class="result"> <div class="Fuel E-Plus-91 Liter">3.22 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-16.15%</span></div> <div class="Fuel Special-95 Liter">3.30 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.82%</span></div> <div class="Fuel Super-98 Liter">3.41 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.38%</span></div> <div class="Fuel E-Plus-91 Galon">12.24 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-16.15%</span></div> <div class="Fuel Special-95 Galon">12.54 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.82%</span></div> <div class="Fuel Super-98 Galon">12.96 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.38%</span></div> <div class="Diesel Special-95 Super-98 E-Plus-91 Liter">3.87 AED <i class="arrow top"></i><span class="dif">-0.27</span><span class="difp">-6.52%</span></div> <div class="Diesel Special-95 Super-98 E-Plus-91 Galon">14.71 AED <i class="arrow top"></i><span class="dif">-1.03</span><span class="difp">-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" class="result"> <div class="cFuel cLiter">[visualizer id="36" lazy="no" class=""]</div> <div class="cFuel cGalon">[visualizer id="39" lazy="no" class=""]</div> <div class="cDiesel cLiter">[visualizer id="43" lazy="no" class=""]</div> <div class="cDiesel cGalon">[visualizer id="48" lazy="no" class=""]</div> <div></div> </div> </center>