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

Question

My list is generated via 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>
";
                                }
                            ?>
                        </datalist>

And it shows up like this.

Each of the options has a text value, which is "15" from the image. the value of the option itself is "Mehta, Jack"

I wanted to know how to get the text value and to pass it from a javascript function.

I tried using an onchange method in both the input and the datalist tag.

But it says Cannot ready property text of 'undefined'.

Answer 1

There is no straight way to get datalist option text in javascript

You can add one more attribute id and put that text value there and get the result like below

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

Demo: http://plnkr.co/edit/fJ8aT1PsbftWV8Q6d0tZ?p=preview