Question

我的列表是通过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>

它就像这样出现了。 enter image description here

每个选项都有一个文本值，即＆＃34; 15＆＃34;从图像。选项本身的价值是＆＃34; Mehta，Jack＆＃34;

我想知道如何获取文本值并从javascript函数传递它。

我尝试在输入和datalist标记中使用onchange方法。

但是它说不能准备好未定义的属性文本＆＃39;。

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

Answer 2

在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">

<强> 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

Answer 3

这是我发现使用JQuery

执行此操作的最佳方法

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

您必须将函数放在输入的oninput事件而不是datalist上。一旦您选择了选择，这将激活。如果你使用onchange事件，它只会在失去焦点或模糊（）发生后触发。

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

3 个答案: