如何使用javascript显示包含数据库元素的选项(html)

wfveoks0  于 2021-06-18  发布在  Mysql
关注(0)|答案(2)|浏览(239)

我试图使在数据库中注册的元素在html表单中显示为“select”选项
选择mysql:table'project'column'name'
选择函数和html表单:

con.connect(function (err) {
    if (err) throw err;
    con.query("SELECT name FROM project", function (err, result, fields) {
        if (err) throw err;
        console.log(result);
    });
});
<div class="box-form">
    <div class="box-header">
        <p class="title">
            Choose the BOT
        </p>
    </div>
    <form id="form-submit">
        <img alt="robot-icon" class="robot-icon" src="assets / icons / robotic.png" />
        <select id="project" name="project" placeholder="BOT">
            <option value="database-database">select database</option>
        </select>
    </form>
</div>

<script src="js/db_select.js"></script>
ecbunoof

ecbunoof1#

实际上它是一个对象数组(源)。
所以我猜有一个id,和一个名字(标签)。

con.connect(err => {
    if(err) throw err;
    con.query('SELECT name FROM project', (err, res, fields) => {
        res.forEach(project => {
            document.querySelector('#project').innerHTML += `<option value="database-${project.id}">${project.name}</option>`;
        });
    });
});

https://jsfiddle.net/kaki87/o6rmbh57/

eit6fx6z

eit6fx6z2#

您可以在获得结果数据后尝试此操作。
我假设结果是一个数组。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <select id="project" name="project" placeholder="BOT">
            <option value="">select database</option>
    </select>
<script type="text/javascript">
  $(document).ready(function(){
    result = ['db1','db2','db3']
    for(i=0;i<result.length;i++){
      $("#project").append(new Option(result[i],result[i]));
    }

  })
</script>
</body>
</html>

相关问题