1

Есть таблица, в ней содержится input c типом number. Туда водится количество баллов и есть 2 select'a (они заполнены):

  • в 1 select возможные значения: "отлично", "хорошо", "плохо"
  • в 2 select - A,B,C,D,F

Как сделать так, чтобы при внесение данных в input, например, "100" - в первом select, автоматически выставлялась "отлично", а во 2 select, на основе 1 select, автоматически выставлялась "А".

И данных много, то есть не один столбец.

Я использовал ajax, но не получается. ajax для создание таблицы

$(document).ready(function(){
  $('#academ_preformance').bind("click", function (){
  $("#div_table_performance").remove();




     $.ajax ({
    url: "poseschenie_zanyatiy.actions.php",
    method: "POST",
    data: {
      "ajax" : "1",
      "group_performance": $('#akgroup_performance').val(),
      "date_P": $("input[name='Date_Delivery']").val()



    },
    success: function (output)
    {

      $("div.container").append($(output));

    }
   });
});
  });

script для автоматического изменения селектов

const rows = document.querySelectorAll('.my-row');
[...rows].forEach(function (row) {
const input = row.querySelector('.my-input')
const select1 = row.querySelector('.my-select1')
const select2 = row.querySelector('.my-select2')
let oldInput = input.value

input.oninput = function () {
const val = input.value
const options = [...select1.options]
const optionsFiltered = options.filter(i => +i.value >= val)
const option = optionsFiltered[optionsFiltered.length - 1]

if (!option) {
  input.value = oldInput
  return alert('Не допустимая оценка')
}

const index = options.indexOf(option)

select1.selectedIndex = select2.selectedIndex = index
oldInput = val

} }) php код на создание таблиц

    if(isset($_POST['ajax']) && $_POST['ajax'] == 1){
   $date_P=$_POST['date_P'];    
   $group_performance=$_POST['group_performance'];
    $tbl_Performance="<div class='row' id='div_table_performance'>
                                    <table name='R'>
                                    <tr class='table_tbl_Performance'>
                                            <td rowspan='2'>Список студентів</td>
                                           <td colspan='3'>Оцінка</td>
                                        <td rowspan='2'>Дата складання дисципліни</td>
                                            </tr>


                                        <tr class='table_tbl_Performance'>
                                 <td>Кількість балів</td>
                                <td>За національною шкалою</td>
                                   <td>За шкалою ECTS</td>




                                    </tr>";


    if ($result = $mysqli->query("SELECT * FROM ST WHERE ST_AKGRP = $group_performance")) {

             while($row = $result->fetch_assoc()){
                $sur_name_st = $row['ST_F1U'];
                $id_st = $row['ST_ID'];
                $name_st = $row['ST_F2U'];
                $patronymic = $row['ST_F3U'];

                  $tbl_Performance .= "  <tr title=$id_st class='RowTable'>
                    <td> $sur_name_st $name_st  $patronymic</td>

                    <td> <input type='number'  class='USP6_100 EntInput' value='0' /></td>

                    <td><select class='USP6 EntSelect1'>

                                    <option selected>Не определено</option>
                                    <option value='100'>Отлично</option>
                                    <option value='89'>добре</option>
                                    <option value='81'>добре</option>
                                    <option value='74'>задовил</option>
                                    <option value='66'>задовил.</option>
                                    <option value='59'>незадовил.</option>
                                    <option value='34'>незадов.</option>
                                    <option value='0'>незадов.</option>




                            </select>
                    </td>
                    <td><select class='USP6ECTS EntSelect2'>
                                 <option selected>Не определено</option>
                                                <option>A</option>
                                                <option>B</option>
                                                <option>C</option>
                                                <option>D</option>
                                                <option>E</option>
                                                <option>Fx</option>
                                                <option>F</option>


                            </select>
                            </td>
                            <td><input type='date' value='$date_P' 
    class='USP7'/></td>


                                        </tr>";
                    }
   }
  $res_table.="</table>  </div>";
   echo  $tbl_Performance;


}
1
  • Покажите Ваш код, который у вас не заработал 10 сен 2018 в 23:08

1 ответ 1

0

Оценки разбиты по интервалам которые указываются в my-select1, например, если ввести 90, то будет взят интервал от 100 до 70(божественно), если 70, то возьмется от 70 до 40(отлично).

const rows = document.querySelectorAll('.my-row')

;[...rows].forEach(function (row) {
  const input = row.querySelector('.my-input')
  const select1 = row.querySelector('.my-select1')
  const select2 = row.querySelector('.my-select2')
  let oldInput = input.value
  
  input.oninput = function () {
    const val = input.value
    const options = [...select1.options]
    const optionsFiltered = options.filter(i => +i.dataset.value >= val)
    const option = optionsFiltered[optionsFiltered.length - 1]

    if (!option) {
      input.value = oldInput
      return alert('Не допустимая оценка')
    }

    const index = options.indexOf(option)

    select1.selectedIndex = select2.selectedIndex = index
    oldInput = val
  }
})
.my-row {
  margin-bottom: 10px;
}
<div class="my-row">
  <input class="my-input" type="number">

  <select class="my-select1">
    <option selected>Не определено</option>
    <option data-value="100" value="божественно">божественно</option>
    <option data-value="70" value="отлично">отлично</option>
    <option data-value="40" value="хорошо">хорошо</option>
    <option data-value="10" value="плохо">плохо</option>
    <option data-value="0" value="отвратительно">отвратительно</option>
  </select>

  <select class="my-select2">
    <option selected>Не определено</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
  </select>
</div>

<div class="my-row">
  <input class="my-input" type="number">

  <select class="my-select1">
    <option selected>Не определено</option>
    <option data-value="100" value="божественно">божественно</option>
    <option data-value="70" value="отлично">отлично</option>
    <option data-value="40" value="хорошо">хорошо</option>
    <option data-value="10" value="плохо">плохо</option>
    <option data-value="0" value="отвратительно">отвратительно</option>
  </select>

  <select class="my-select2">
    <option selected>Не определено</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>F</option>
  </select>
</div>

13
  • Спасибо за быстрый ответ, но есть еще вопрос такой , это же только используется для 1 строчки ,А если мне надо для строчек 20 или 30, то уже нужно использовать другую функцию , а не querySelector?
    – Одиум
    11 сен 2018 в 19:54
  • Переделал для любого количества строк. 12 сен 2018 в 1:33
  • Спасибо) Очень помогли, но почему-то именно в моей коде этот вариант почему-то не работает. У меня получается, что я создаю таблицу с помощью ajax, даю tr класс my-row, input и selecta нужные классы как в вашем примере, но ничего не происходит и никаких ошибок не выводит. Попробовал создать новую таблицу , все получается. Вообще не могу понять в чем проблема.....
    – Одиум
    12 сен 2018 в 18:51
  • Вы можете обернуть весь скрипт в функцию, потом Вам нужно вызвать эту функцию после того как вы сделали таблицу через ajax, чтобы скрипт сработал только когда таблица была сделана, а не при начальной загрузке страницы. 13 сен 2018 в 1:33
  • А не можете привести пример , что бы наглядно посмотреть на это ? я направления понял, но не до конца понял, как правильно это реализовать
    – Одиум
    13 сен 2018 в 13:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.