Как рассчитать / затем отобразить / изменить цвет CSS поля, отображающего значение

Question

По сути, у меня есть форма, в которой на данный момент есть 2 выпадающих списка с весами для каждого элемента.

Мне нужно на странице вычислить общее значение на основе весов из выпадающих списков.

Это будет отображаться в поле, которое будет менять цвет в зависимости от того, насколько высоко значение получает.

Например, выпадающее меню 1 будет Item1 = One, вес = 1 Item2 = Two, вес = 2 и т. Д. И т. Д.

Математика будет (выпадающий 1 вес выбранного предмета) * (выпадающий 2 вес выбранного предмета).

В каждом выпадающем списке будет только 5 предметов весом от 1 до 5.

Сейчас у меня есть 2 таблицы, в которых хранятся данные, относящиеся к двум выпадающим спискам. Если проще было сделать это, то было проще получить конечный результат, тогда я пойду на это.

Я попытаюсь обновить завтра эту тему экспериментами, которые я провел до сих пор, но если у кого-то есть какие-либо идеи, я весь слух.

Answer 1

Если я правильно понял ваш вопрос, что насчет чего-то вроде this ?

Идея состоит в том, чтобы прикрепить событие change к вашим select элементам (вам может потребоваться изменить селектор, чтобы он был более конкретным, если на вашей странице больше).В обработчике событий мы получаем значение 2 select рассматриваемых элементов, умножаем их и записываем результат в div.Затем цвет фона div изменяется в зависимости от общего значения.