Show/Hide DIV's on two selects values
Show/Hide DIV's on two selects values
HTML
<select id="term" name="form_select">
<option value="0">Choose term</option>
<option value="1">Month</option>
<option value="2">Week</option>
<option value="3">Day</option>
</select>
<select id="season" name="form_select">
<option value="0">Choose season</option>
<option value="1">Low</option>
<option value="2">Hight</option>
<option value="3">Peak</option>
</select>
<div id=ad_lowmonth>
Price month in low season <input type="text" id="amount-lowmonth" name="amount-lowmonth" /><br>
<div id="slider-lowmonth"></div>
<input style="display:hidden;" name='ad_lowmonth_min' id='ad_lowmonth_min' value="" maxlength='20' class='inputbox hidden' type='text' size='0' />
<input name='ad_lowmonth_max' id='ad_lowmonth_max' value="" maxlength='20' class='inputbox hidden' type='text' size='0' />
</div>
<div id=ad_lowweek>
Price week in low season<input type="text" id="amount-lowweek" name="amount-lowweek" /><br>
<div id="slider-lowweek"></div>
<input name='ad_lowweek_min' id='ad_lowweek_min' value="" maxlength='20' class='inputbox' type='text' size='0' />
<input name='ad_lowweek_max' id='ad_lowweek_max' value="" maxlength='20' class='inputbox' type='text' size='0' /></div>
<div id=ad_lowday>Price day in low season from <input name='ad_lowday_min' id='ad_lowday_min' value="" maxlength='20' class='inputbox' type='text' size='0' /> to<input name='ad_lowday_max' id='ad_lowday_max' value="" maxlength='20' class='inputbox' type='text' size='0' /></div>
<div id=ad_hightmonth>Price month in hight season from<input name='ad_hightmonth_min' id='ad_hightmonth_min' value="" maxlength='20' class='inputbox' type='text' size='0' /> to<input name='ad_hightmonth_max' id='ad_hightmonth_max' value="" maxlength='20' class='inputbox' type='text' size='0' /></div>
<div id=ad_hightweek>Price week in hight season from<input name='ad_hightweek_min' id='ad_hightweek_min' value="" maxlength='20' class='inputbox' type='text' size='0' /> to<input...
CSS
div{
display:none;
}
#slider-lowmonth,
#slider-lowweek,
#slider-lowday,
#slider-hightmonth,
#slider-hightweek,
#slider-hightday,
#slider-peakmonth,
#slider-peakweek,
#slider-peakday
{
width:400px;
display:block;
}
.hidde
{
display:none;
}
JavaScript
$(function () {
$('#term, #season').on('change', function () {
$('div[id^="ad_"]:gt(3)').css("display", "none");
var term = $.trim($('#term :selected').text().toLowerCase()),
season = $.trim($('#season :selected').text().toLowerCase());
if ($('#term :selected').val() > 0 && $('#season :selected').val() > 0) {
var $sel = '#ad_' + season + term;
$($sel).css("display", "block");
}
});
});
$(function() {
$("#slider-lowmonth").slider({
range: true,
min: 0,
max: 300000,
step: 5000,
values: [35000, 115000],
slide: function(event, ui) {
$("#ad_lowmonth_min").val(ui.values[0]);
$("#ad_lowmonth_max").val(ui.values[1]);
$("#amount-lowmonth").val(ui.values[0] + " - " + ui.values[1]);
},
create: function(event, ui) {
$("ad_lowmonth_min").val(1);
$("ad_lowmonth_max").val(10);
}
});
$("#amount-lowmonth").val($("#slider-lowmonth").slider("values", 0) + " - " + $("#slider-lowmonth").slider("values", 1));
$("#slider-lowweek").slider({
range: true,
min: 0,
max: 300000,
step: 5000,
values: [35000, 115000],
slide: function(event, ui) {
$("#ad_lowweek_min").val(ui.values[0]);
$("#ad_lowweek_max").val(ui.values[1]);
$("#amount-lowweek").val(ui.values[0] + " - " + ui.values[1]);
},
create: function(event, ui) {
$("ad_lowweek_min").val(1);
$("ad_lowweek_max").val(10);
}
});
$("#amount-lowweek").val($("#slider-lowweek").slider("values", 0) + " - " + $("#slider-lowweek").slider("values", 1));
});