Блог

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

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

#javascript #html #select #drop-down-menu

Вопрос:

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

У меня есть раскрывающееся поле выбора, которое заполняется запросом к базе данных. В данном случае он нашел только один соответствующий город. Выбор этого города, который переводит пользователя на другую страницу, а затем нажатие кнопки «Назад» возвращает пользователя на страницу, где выбор все еще находится в выбранном состоянии, что предотвращает его повторный выбор, если сначала не будет сделан другой выбор. Поэтому я добавил событие onClick, чтобы изменить выбранное значение по умолчанию, прежде чем покинуть страницу.

HTML

 <div>
    <select class="DropList"  name="CitySelect" id="CitySelect"
        onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}"
        onclick="GetSelect()">
        <option value="" selected>Select City</option>
        <option value="city.php?s=Montanaamp;cn=Yellowstoneamp;CalNav=0amp;c=Billings">Billings</option>
    </select>
</div>

язык JavaScript

 <script type="text/javascript">
    function GetSelect()
    {
        document.getElementById('CitySelect').value = "";
    }
</script>

Ответ №1:

Прослушивание события щелчка не является идеальным по нескольким причинам:

  • Он срабатывает, когда вы нажимаете кнопку выбрать, чтобы открыть его, а не когда вы на самом деле выбираете опцию. Таким образом, ваш код очищает значение, когда вы открываете select, что приводит к некоторой нервозности.
  • Он не запускается, если вы используете клавиатуру для выбора значения.

Поэтому я бы вместо этого предложил использовать событие размытия:

 $('#CitySelect').on('blur', (e) => (e.target.value = ''));

Сразу после выбора значения в поле выбора по-прежнему будет новое значение, но как только вы покинете поле («размытие» его), значение будет сброшено.

Посмотрите на эту скрипку

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

1. Точка хорошо снята с помощью размытия. В итоге я просто заменил onclick на onblur, что отлично работает. Я не смог заставить ваш пример работать как есть. Запускаю jQuery 1.10 в этом проекте прямо сейчас, но даже когда я дополнил ваш код, он не сработал для меня. Не совсем понимаю, почему. Возможно, это как-то связано с тем, как я заполняю свои выборки, используя функцию PHP, которую я написал с кучей параметров. Я предполагаю, что простое изменение onclick на onblur в моем примере будет работать нормально. Не вижу никаких проблем. Ваши мысли?.

2. На самом деле я обнаружил, что onblur по какой-то причине не работал в Edge и, я полагаю, в других браузерах webkit, поэтому я вернулся к onclick. Поскольку, я предполагаю, событие onclick произойдет до появления сообщения, возможно, в этом и заключается проблема. Я не испытываю проблем, о которых вы упоминали, используя onclick.

Метки: ,