Форум

tp-20 · #21 (**permalink**) 12.05.2021, 22:44

Сообщение от Dilettante_Pro

Подскажите пожалуйста, как радиокнопки переделать на выпадающий список 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>

....

рони · #22 (**permalink**) 12.05.2021, 23:08

Сообщение от tp-20

как радиокнопки переделать на выпадающий список select?

долго и упорно думать над строкой 34 ... и что-то там удалить.

tp-20 · #23 (**permalink**) 13.05.2021, 00:15

Сообщение от рони

строкой 34 ... и что-то там удалить.

не допёрло. пробовал и через option, и классы им присвоил..
выручай!

рони · #24 (**permalink**) 13.05.2021, 00:34

tp-20,

var plan = $('[name=plan]');

tp-20 · #25 (**permalink**) 13.05.2021, 01:06

рони,
этот вариант я тоже пробовал, но select не меняется.
https://jsfiddle.net/tps20/qdym1uvb/2/ - тут накидал, чтобы проще ориентироваться.

рони · #26 (**permalink**) 13.05.2021, 11:19

Сообщение от 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>

tp-20 · #27 (**permalink**) 13.05.2021, 12:57

рони,
да, спасибо! то что надо.
подскажи пожалуйста ещё один момент.
нужно указать диапазон value: например от 1000 до 2999, от 3000 до 4990, и от 4991 до 5000 - для примера.

я так понял, это на строке 68 нужно изменить условие для value - должны быть диапазоны, чтобы при движении ползунка значения в селекте чётко переключались.

что-то типа такого:

if ((value >= 1000 && value <= 2999) || 
    (value >= 3000 && value <= 4990) || 
    (value >= 4991 && value <= 5000)) plan.val(value)

рони · #28 (**permalink**) 13.05.2021, 13:29

tp-20,

function checkPlan() {
                var value = +input.val();
                if (value < 2300) value = 1000;
                else if (value < 3600)  value = 3000;
                else value = 5000;
                plan.val(value)
            }

tp-20 · #29 (**permalink**) 27.07.2021, 21:01

добрый вечер.
вопрос по слайдеру.

как убрать второй ползунок?
т.е. range не нужен. просто нужен одиночный ползунок.
Спасибо!

<!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">


<div id="slider"></div>

<input type="text" name="from" id="from" value="" placeholder="from" />
<input type="text" name="to" id="to" value="" placeholder="to" />
<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>

myData = [ 1,2,4,6,8,10,20,30,40,50,100,200,300,400,500 ];

		slider_config = {
			range: true,
			min: 0,
			max: myData.length - 1,
			step: 1,
			slide: function( event, ui ) {
                    // Set the real value into the inputs
                    $('#from').val( myData[ ui.values[0] ] );
                    $('#to').val( myData[ ui.values[1] ] );
			},
            create: function() {
                    $(this).slider('values',0,0);
                    $(this).slider('values',1,myData.length - 1);
            }
		};

		// Render Slider
		$('#slider').slider(slider_config);
    </script>

<style>
* {
    font-family:Arial;
    font-size:20px;
}
body {
    padding:20px;
}
#slider { margin:20px }
</style>
</body>
</html>

рони · #30 (**permalink**) 27.07.2021, 21:30

tp-20,

slider_config = {
            min: 0,
            max: myData.length - 1,
            step: 1,
            slide: function( event, ui ) {
                    $('#from').val( myData[ ui.value ] );
           },
            create: function(event, ui) {
                    $('#from').val( myData[0] );
            }
        };

Форум

Справочник

Discord чат

Курсы javascript