Подскажите пожалуйста, как радиокнопки переделать на выпадающий список select?
<select name="plan" id="plan">
<option value="1000">Start</option>
<option value="3000">Medium</option>
<option value="5000">Pro</option>
</select>
вот тут радиокнопки, начиная с 12й строки:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css">
<style>
ul li {
display: inline-block;
margin-right: 5px;
padding: 3px;
}
</style>
<form method="post" name="calc" onsubmit="recalc(); return false;">
<div>
<ul>
<li><label class="radio"><input type="radio" name="plan" value="1000" checked ><div>START</div></label>
</li>
<li><label class="radio"><input type="radio" name="plan" value="3000" ><div>STANDART</div></label>
</li>
<li><label class="radio"><input type="radio" name="plan" value="5000" ><div>PREMIUM</div></label>
</li>
</ul>
</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(document).ready(function($) {
var plan = $('input[name=plan');
var input = $('input.minCost');
var slider = $('.slider').slider({
range: 'max',
min: 100,
max: 5000,
value: 100,
step: 10,
animate: 300,
slide: function(event, ui) {
input.val(ui.value);
checkPlan();
}
});
input.val(slider.slider('value'));
checkPlan();
// input.on('change', function() {
// slider.slider('value', $(this).val());
// });
plan.on('change', function() {
slider.slider('value', $(this).val());
input.val($(this).val());
});
input.on('change', function() {
var value1=input.val();
if (value1 > 5000) { value1 = 5000; input.val(5000)}
if (value1 < 100) { value1 = 100; input.val(100)}
slider.slider('value',value1);
checkPlan();
});
// фильтрация ввода в поля
jQuery('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() {
plan.each(function(i, elem) {
if(+input.val() <= +elem.value) {
$(elem).prop('checked', true);
return false;
}
});
}
});
</script>
|