如何在javascript中获取datalist中所选项目的值？答案

【问题标题】：How to get the value of selected item inside datalist in javascript?如何在javascript中获取datalist中所选项目的值？
【发布时间】：2015-01-29 04:40:25
【问题描述】：

我的列表是通过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 函数中传递它。

我尝试在 input 和 datalist 标记中都使用 onchange 方法。

但它显示无法准备好“未定义”的属性文本。

【问题讨论】：

Please, don't use mysql_* functions in new code。它们不再维护and are officially deprecated。看到red box？改为了解prepared statements，并使用PDO 或MySQLi - this article 将帮助您决定哪个。如果你选择 PDO，here is a good tutorial.
啊，是的，我的mysql连接还没改，这只是为了测试我的SQL语句是否正确。
顺便我打算用mySQLi。
你在看这个plnkr.co/edit/fJ8aT1PsbftWV8Q6d0tZ?p=preview 吗？

标签： javascript php html

【解决方案1】：

试试：

// 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);

【讨论】：

我应该将此代码放在另一个函数中还是放在
@MarkCortejo 就在<script> 标签内。

【解决方案2】：

这是我发现使用 JQuery 执行此操作的最佳方法

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

您必须将函数放在输入的 oninput 事件而不是数据列表上。一旦您选择选择，这将触发。如果你使用 onchange 事件，它只会在你失去焦点或 blur() 发生后触发。

【讨论】：

【解决方案3】：

在 javascript 中没有直接获取 datalist option text 的方法

您可以再添加一个属性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">

     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

【讨论】：