|
Сообщение от tp-20
|
|
но select не меняется.
|
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css">
<form method="post" name="calc" onsubmit="recalc(); return false;">
<div>
<select name="plan" id="plan">
<option value="1000">Start</option>
<option value="3000">Medium</option>
<option value="5000">Pro</option>
</select>
</div>
<div>
<input name="sum" id="calc_sum" type="text" class="minCost" value="" />
<div class="slider"></div>
</div>
<div>
<input name="calc_btn" value="Рассчитать" type="submit">
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
jQuery(function($) {
var plan = $('[name=plan]');
var input = $('input.minCost');
var slider = $('.slider').slider({
range: 'max',
min: 1000,
max: 5000,
value: 1000,
step: 10,
animate: 300,
slide: function(event, ui) {
input.val(ui.value);
checkPlan();
}
});
input.val(slider.slider('value'));
checkPlan();
plan.on('change', function() {
slider.slider('value', this.value);
input.val(this.value);
});
input.on('change', function() {
var value = this.value;
if (value > 5000) value = 5000;
if (value < 1000) value = 1000;
this.value = value;
checkPlan();
slider.slider('value', value);
});
$('input').keypress(function(event) {
var key, keyChar;
if (!event) var event = window.event;
if (event.keyCode) key = event.keyCode;
else if (event.which) key = event.which;
if (key == null || key == 0 || key == 8 || key == 13 || key == 9 || key == 46 || key == 37 || key == 39) return true;
keyChar = String.fromCharCode(key);
if (!/\d/.test(keyChar)) return false;
});
function checkPlan() {
var value = input.val();
if (value == 1000 || value == 3000 || value == 5000) plan.val(value)
}
});
</script>
</body>
</html>