Изменения значения select в зависимости от значения input

279

12 июня 2018, 13:20

Есть 1 input и 1 select, как сделать так, что бы в select выводилось значение в зависимости от того, что было ведено в input. Напримет, вот количество баллов по предмету 100, вводим 100 в input, и в select должно вывести Отлично. Эти таблицы есть в базе данных. Понимаю, что надо через ajax, но не получается.

Answer 1

Набросал для вас пример кода на jQuery:

<select name="select" id="select">
  <option value="bad">Не очень</option>
  <option value="normal">Нормально</option>
  <option value="good">Отлично!</option>
</select>
<input type="number" min="0" max="100" name="numberInput" placeholder="Введите число" id="numberInput">
<script>
$('#numberInput').on('input', function () {
    var val = $(this).val(),
        $select = $('#select');
    if (val >= 0 && val <= 40) {
        $select.val('bad');
    }
    if (val > 40 && val <= 60) {
        $select.val('normal');
    }
    if (val > 60 && val < 100) {
        $select.val('good');
    }
});
</script>

Обратите внимание, что код выше не предусматривает валидацию, элегантность и т.п.

Answer 2

Более элегантно

var keys = { 
  rates: [ 
    {name: "very-bad", begin: 0}, 
    {name: "bad", begin: 25}, 
    {name: "normal", begin: 50}, 
    {name: "good", begin: 75}, 
    {name: "very-good", begin: 100} 
  ] 
} 
  var select = document.getElementById("sel"); 
 
document.getElementById("rate").addEventListener("input", function(){ 
  for (var i = 0; i < 5; i++) { 
    if (keys.rates[i].begin <= this.value) select.value = keys.rates[i].name; 
  } 
});

<select id="sel"> 
  <option value="very-bad">Очень плохо</option> 
  <option value="bad">плохо</option> 
  <option value="normal" selected>Средне</option> 
  <option value="good">хорошо</option> 
  <option value="very-good">Очень хорошо</option> 
</select> 
<input type="number" id="rate" min="0" max="100" value = "50">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Неверно отображается курсор мыши в QGraphicsView

Столкнулся с проблемой в QGraphicsView, при помещении на QGraphicsScene прокси виджета QGraphicsProxyWidget, в котором находится QTableWidget, не всегда верно отображается...

204

c++