如何使用 Javascript 将（列表）属性添加到输入元素？

Question

我正在尝试在 JS 中创建一个输入元素并使用 (setAttribute) 将 (list) 属性附加到它。然后创建一个数据列表并从数据库中获取数据值（两列：物种和属），如 PHP 代码所示。问题是输入元素没有显示任何检索到的数据值。

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <script>
    function createInput(){
    var container = document.getElementById("chatcontainer");
    var input = document.createElement("input");
    input.type = "text";
    input.setAttribute("name", "inputTest");
    input.setAttribute("placeholder", "Enter Text");
    input.required = true;
    input.setAttribute("list", "termList");
    input.setAttribute("style", "width:20%;");
    container.appendChild(input);
    }
</script>
    </head>
    <body>
        <div class="container" id="chatcontainer">
            <button class="btn fa fa-plus-circle" onclick="createInput()">&nbsp;Create an input field</button>
            <datalist id="termList">
                <?php 
    require "db_connect.php"; // Database Connection 
    $d_list="(select species as Term from bioset) union (select distinct genus from bioset)";
    foreach ($conn->query($d_list) as $row) {
    echo "<option>";
    echo $row['Term'];
    echo "</option>";
    }            
    ?>
            </datalist>
        </div>
    </body>
</html>

Answer 1

您的方法似乎可行，所以，这意味着错误不在这段代码中。

function createInput() {
  var container = document.getElementById("chatcontainer");
  var input = document.createElement("input");
  input.type = "text";
  input.setAttribute("name", "inputTest");
  input.setAttribute("placeholder", "Enter Text");
  input.required = true;
  input.setAttribute("list", "termList");
  input.setAttribute("style", "width:20%;");
  container.appendChild(input);
}

<div id="chatcontainer">
  <button onclick="createInput()">&nbsp;Create an input field</button>
  <datalist id="termList">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
  </datalist>
</div>

如何使用 Javascript 将（列表）属性添加到输入元素？

How to add (list) attribute to input element using Javascript?

html

javascript

css

php

web