Как обработать событие выбора значения мышью в теге <datalist>?

@burda_a_m · Регистрация: 09.07.2016

Студворк — интернет-сервис помощи студентам

Здравия желаю!

В форме есть поле "Город". Для его указания связал "input" с "datalist". Вот код:

HTML5
1
2
3
4
5
6
7
input id="InputCity" type="text" value="" name="city" list="ListCitys">
<datalist id="ListCitys">
<option value="Берлин"></option>
<option value="Брест"></option>
<option value="Варшава"></option>
<option value="Минск"></option>
</datalist>

При изменении поля "Город" должна выполняться моя функция recalc. С помощью обработчика события "keyup" для <input> это реализовал таким образом:

JavaScript
1
2
3
$("#InputCity").keyup(function(){
  recalc();
});

Если набираешь текст в поле "Город" и выбираешь вариант с помощью клавиатуры, функция срабатывает. Но если выбираешь вариант с помощью мышки, функция recalc() не срабатывает. Пробовал для #InputCity" и "#ListCitys" обрабатывать событие "click":

JavaScript
1
2
3
4
5
6
$("#InputCity").click(function(){
  recalc();
});
$("#ListCitys").click(function(){
  recalc();
});

Не помогает

.
Не подскажите, как решить задачку?

@Уф · 12.08.2016, 17:17

JavaScript
1
2
3
$("#InputCity").on('click change keyup', function(){
  recalc();
});

так попробуй

@burda_a_m · 12.08.2016, 19:41 **[ТС]**

JavaScript
1
2
3
$("#InputCity").on('click change keyup', function(){
  recalc();
});

так попробуй

Не работает

@Forastero · 12.08.2016, 21:59

Функцию recalc() несите сюда.

@burda_a_m · 14.08.2016, 19:02 **[ТС]**

Функцию recalc() несите сюда.

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Выбор города в datalist</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
 
<body>
    <div id="DivCity">Едем в город "<span></span>".</div>
 
    <input id="InputCity" type="text" value="" name="city" list="ListCitys">
    <datalist id="ListCitys">
        <option value="Берлин"></option>
        <option value="Брест"></option>
        <option value="Варшава"></option>
        <option value="Минск"></option>
        <option value="Москва"></option>
    </datalist>
    
    <script type="text/javascript">
        function recalc(){
        $("#DivCity span").html($("#InputCity").val());
    }
    $("#InputCity").keyup(function() { // Работает
            recalc();
        });
    $("#ListCitys").click(function() { // НЕ работает
            recalc();
        });
    $("#ListCitys option").click(function() { // НЕ работает
            recalc();
        });
    </script>
</body>
</html>

Какие еще будут варианты решения задачи?

Добавлено через 5 часов 22 минуты
Пока никто решения не предложил, поделюсь своим вариантом. Правда, сомневаюсь в его оптимальности. Мое решение заключается в том, что, как только фокус попадает на текстовое поле ввода города, включается таймер, который через каждые 100ms вызывает функцию recalc(). Вот такой код целой HTML-странички получился:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Выбор города в datalist</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
 
<body>
    <script type="text/javascript">
        var t;
        function recalc(){
            $("#DivCity span").html($("#InputCity").val());
        }
        function timer_on(){
            recalc();
            t = setTimeout("timer_on()",100);
        }
    </script>
 
    <div id="DivCity">Едем в город "<span></span>".</div>
 
    <input id="InputCity" type="text" name="city" list="ListCitys" autocomplete="off">
    <datalist id="ListCitys">
        <option value="Берлин"></option>
        <option value="Брест"></option>
        <option value="Варшава"></option>
        <option value="Минск"></option>
        <option value="Москва"></option>
    </datalist>
 
    <script type="text/javascript">
    $("#InputCity").keyup(function() { // Работает
            recalc();
        });
        
    $("#InputCity").focus(function() {
            timer_on(); // Включаем таймер
        });
    $("#InputCity").blur(function() {
            recalc();
            clearTimeout(t); // Выключаем таймер
        });
    </script>
</body>
</html>

Ребята, что скажите по поводу данного варианта решения? Насколько оно оптимально? Ну и, если у кого есть другое решение, буду рад его услышать.

@Уф · 15.08.2016, 11:03

JavaScript
1
2
3
$("#InputCity").on('click change keyup select', function(){
  recalc();
});

нашел нужное тебе событие

@burda_a_m · 15.08.2016, 18:38 **[ТС]**

JavaScript
1
2
$("#InputCity").on('click change keyup select', function(){
  recalc();

});

НЕ РАБОТАЕТ!!!

@burda_a_m · 15.08.2016, 19:39 **[ТС]**

Вот, что происходит (точнее, не происходит), когда выбираешь город мышью:
Название: Выбор-города-мышью.gif
Просмотров: 99

Размер: 15.4 Кб

При этом, если редактировать текст в поле или выбирать вариант с помощью клавиатуры, то все работает.

@Уф · 16.08.2016, 12:23

вот. событие input работает https://jsfiddle.net/d9kjjqyc/

@burda_a_m · 18.08.2016, 14:57 **[ТС]**

Получилось! Вот окончательный код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Выбор города в datalist</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
 
<body>
 
    <div id="DivCity">Едем в город "<span></span>".</div>
 
    <input id="InputCity" type="text" name="city" list="ListCitys" autocomplete="off">
    <datalist id="ListCitys">
        <option value="Берлин"></option>
        <option value="Брест"></option>
        <option value="Варшава"></option>
        <option value="Минск"></option>
        <option value="Москва"></option>
    </datalist>
 
    <script type="text/javascript">
        $("#InputCity").on("change keyup input", function(){
          $('#DivCity span').html( $(this).val() );
        });
    </script>
</body>
</html>

Уф, спасибо большое.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	12.08.2016, 21:59
	Функцию recalc() несите сюда. 0

@burda_a_m 0 / 0 / 0 Регистрация: 09.07.2016 Сообщений: 17
	15.08.2016, 19:39 [ТС]
	Вот, что происходит (точнее, не происходит), когда выбираешь город мышью: При этом, если редактировать текст в поле или выбирать вариант с помощью клавиатуры, то все работает. 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	16.08.2016, 12:23
	Сообщение было отмечено burda_a_m как решение Решение вот. событие input работает https://jsfiddle.net/d9kjjqyc/ 1

Как обработать событие выбора значения мышью в теге <datalist>?

Решение