Блог

Главная - Вопросы по программированию - получить все значения выпадающего списка, чтобы увидеть, изменилось ли загруженное значение с помощью javascript

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

#javascript #drop-down-menu

#javascript #выпадающее меню

Вопрос:

Это делается для проверки, открывает ли пользователь другой div (форма; для страницы их четыре), не сохранив запись или обновление для текущей формы.

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

Спасибо,

Джеймс

Комментарии:

1. Итак, пользователь добавляет записи в выпадающий список, или изменяет начальное значение, или и то, и другое?

2. Возможно, просто изменение начального значения (что является лучшим способом, которым я должен был задать вопрос). Сценарий заключается в том, что пользователь открывает одну из форм (divs), вносит изменения и по какой-либо причине не сохраняет его, а переходит на другую форму или страницу.

Ответ №1:

Вы можете сделать это, обновив переменную при изменении вашего выбора, а затем проверяя это значение всякий раз, когда вы делаете то, что делаете, чтобы перейти к следующей форме. Вот код, который я смоделировал:

HTML — 

 <select id="one">
    <option value=""></option>
    <option>1</option>
    <option>2</option>
</select>
<br />
<select id="two">
    <option value=""></option>
    <option>3</option>
    <option>4</option>
</select>
<br />
<select id="three">
    <option value=""></option>
    <option>5</option>
    <option>6</option>
</select>
<br />
<!-- The submit buttons -->
<input type="submit" id="submit" value="Save" />
<br />
<!-- The link that moves on to the next form -->
<a href="#" id="moveOn">Move on</a>

Javascript —

 // the variable
var selectChanged = false;
// set up everything on load
window.onload = function() {

    // bind handlers to submit button, link, an dselects
    document.getElementById("submit").onclick = submitForm;
    document.getElementById("moveOn").onclick = moveOn;

    var selects = document.getElementsByTagName("select");
    var numSelects = selects.length;
    for (var i = 0; i < numSelects; i  ) {
        selects[i].onchange = noteChanged;
    }
}

function submitForm() {
    // set the changed variable to false
    selectChanged = false;
}

function moveOn() {
    // if the select has changed without save, alert the user and prevent
    // link actions
    if (selectChanged) {
        alert("You have changed a form value but not saved it");
        return false;
    }
}

// update the value for each time a select changes
function noteChanged() {
    selectChanged = true;
}

Вот оно в действии

Ответ №2:

Что я хотел бы сделать, так это:

  1. Всякий раз, когда происходит изменение (вы можете подключиться к событию onChange для любых элементов формы, которые вам нужно отслеживать), установите где-нибудь флаг, который указывает, что форма (или что-то еще) «грязная». (хорошее место для размещения этого — в data-attributes)
  2. Когда форма будет сохранена, процесс сохранения может повторно установить грязный флаг на чистый
  3. Какой бы метод ни использовался для переключения форм, вы можете сначала проверить, установлен ли грязный флаг, и если да, отобразить ошибку (или предупреждение) и запретить отображение следующей формы.

Имея эти 3 части на месте, вы должны быть в состоянии легко обнаружить грязную (несохраненную) форму и предпринять соответствующие действия.