Javascript / CSS: динамически изменять цвет границы элемента HTML

У меня есть таблица, созданная из моей установки Laravel, которая отображает несколько свойств моих объектов PHP, например интервал обновления:

<div class = "col-xs-3 text-center">
    <select class = "form-control" required id = "update_interval" name = "update_interval">
        <option value = "">update_interval</option>
        <option value = "never" selected = "selected">never</option>
        <option value = "daily">daily</option>
        <option value = "weekly">weekly</option>
    </select>
</div>

В конкретном случае было установлено значение «никогда». Рядом с настройками доступна кнопка сохранения, позволяющая пользователям сохранять свои настройки:

<div class = "col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 text-center">
    <button type = "submit" class = "" id = "buttonAck16">
        <i class = "glyphicon glyphicon-floppy-save"></i>
    </button>
</form>

(я знаю, что могу использовать для этого ajax, но мои навыки JS / PHP довольно ограничены ....).

Однако, поскольку на странице может быть много строк, люди могут потерять представление о том, что было изменено. Я хотел бы раскрасить записи столбца, например, изменив цвет границы, если выбранный параметр отличается от исходного значения. Таким образом, если он был установлен на «никогда», а пользователь выбирает «еженедельно», этот конкретный элемент должен быть выделен. И, если возможно, кнопка сохранения также может быть выделена.

Какая функция Javascript позволяет непрерывно проверять, что что-то изменилось? Кто-нибудь?

onchange слушатель

Philipp Sander 04.07.2018 16:13

Вы не проверяете «непрерывно» для подобных вещей, но вы реагируете на События. В этом случае это будет событие change этих полей выбора.

CBroe 04.07.2018 16:13

См. Здесь несколько примеров события onchange: w3schools.com/jsref/event_onchange.asp

Sirence 04.07.2018 16:56

см. stackoverflow.com/questions/3487263/…

Abdelghani AINOUSS 04.07.2018 17:07
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
1 237
1

Ответы 1

Вы можете использовать прослушиватель событий jQuery .change ():

Пример:

$( "#update_interval" ).change(function() {
  $(".column-1").css("border-color", "#666");
});

Другие вопросы по теме