PHP Lang
  1. PHP Lang
  3. Как получить значение выбранного элемента внутри datalist в javascript?
Intereting Posts
Мой код рандомизации не работает автономно Как перебирать строку UTF-8 в PHP? Верхний регистр Booleans против нижнего регистра в PHP захват URL-адреса видеоролика с curl или get_video_info Неопределенный индекс с сеансами PHP как назначить id на основе значений массива Как я могу проанализировать ответ, который я получил от CURL? Работа с файлами и utf8 в PHP Преобразование числа с запятой в виде десятичной точки для плавания Постоянный счетчик независимо от обновления страницы. Как я могу получить доступ к свойству объекта, названному как переменная в php? Каков надлежащий способ защиты приложения CodeIgniter 2 с аутентификацией? Когда следует закрыть соединение db? Как отключить определенную сессию php при выходе из системы Аутентификация пользователя REST

Как получить значение выбранного элемента внутри datalist в javascript?

Мой список создается через php: 

<input name="txt_name" list="emp_names" autocomplete="off" id="txt_name" class="textbox" onchange="getID(emp_names.text);"/> <datalist id="emp_names"> <?php $host = "localhost"; $user = "root"; $pass = "mark"; $db = "payrolldb"; $cons = mysql_connect($host,$user,$pass); mysql_select_db($db,$cons); //query start $query = "SELECT ID_Employee, CONCAT(LastName,', ',FirstName) AS Name, Department FROM tbl_employeeInfo;"; $result = mysql_query($query); while ($row = mysql_fetch_array($result)) { echo "<option value='".$row['Name']."'>".$row['ID_Employee']."</option>\n"; } ?> </datalist>

И это проявляется именно так. введите описание изображения здесь

Каждый из вариантов имеет текстовое значение, которое составляет «15» от изображения. значение самой опции – «Mehta, Jack»

Я хотел знать, как получить текстовое значение и передать его из функции javascript.

Я попытался использовать метод onchange как для ввода, так и для тега datalist.

Но он говорит, что не может готовый текст свойства «undefined».

Пытаться: 

 // get the input element and attach event listener to it document.getElementById("txt_name").addEventListener("keyup", function (event) { if (event.which === 13) { // if enter/return key is pressed alert(this.value); // get the value } }, false);

Прямой способ получить datalist option text в javascript

Вы можете добавить еще один id атрибута и поместить туда это текстовое значение и получить результат, как показано ниже.

HTML 

  <input list="emp_names" id="txt_name"> <datalist id="emp_names"> <option value="Mehta, Jack1" id="15">15</option> <option value="Mehta, Jack2" id="16">16</option> <option value="Mehta, Jack3" id="17">17</option> <option value="Mehta, Jack4" id="18">18</option> <option value="Mehta, Jack5" id="19">19</option> </datalist> <input type="button" onclick="alertTheSelectedValue()" value="submit">

JS 

  var alertTheSelectedValue = function() { var val = document.getElementById('txt_name').value; var text = $('#emp_names').find('option[value="' + val + '"]').attr('id'); alert(text); }

Демо: http://plnkr.co/edit/fJ8aT1PsbftWV8Q6d0tZ?p=preview

Это лучший способ, который я нашел для этого, используя JQuery 

 var selection = $("#txt_name").val(); var text = $("#emp_names option").filter(function () { return this.value == selection; }).text();

Вы должны поместить функцию в oninput-событие входа NOT datalist. Это будет срабатывать, как только вы выберете выделение. если вы используете событие onchange, оно будет срабатывать только после того, как вы потеряете фокус или размытие () произойдет.