时间戳

首页 > 解决方案 > 获取下拉框更改值

（来自 MySQL）

javascript - 获取下拉框更改值

（来自 MySQL）

问题描述

免责声明：我尝试查看其他示例，但每个示例都使用 .php，而我的课程不是。我正在尝试从我的 MySQL 服务器中获取值并将它们插入到我的 html 代码中。我不能使用 .php。

这是我在 html 中的脚本示例：

<script>
        console.log("first script test");
        function processForm() {

        let sqlStmt = "";

        sqlStmt = "SELECT * FROM `Product-Service`";
        sqlCost = "Select cost FROM `Product-Service`";
        sqlName = "Select name FROM `Product-Service`";
        sqlDesc = "Select description FROM `Product-Service`";
        console.log("2nd script test");

        MySql.Execute(
            "host", 
            "user",
            "pw",
            "db",
            sqlDesc,
            function (data) {

              document.getElementById("output").innerHTML = data;
              //console.log("data parameter: " + data);

              var dataAsString = JSON.stringify(data);
              document.getElementById("output").innerHTML = dataAsString;

              //console.log("Single row as obj: " + data.Result[0]);
              console.log("Single row as string: " + JSON.stringify(data.Result[0]));
              //console.log("Single row, single column: " + data.Result[0].name);
              document.getElementById("basic").innerHTML = JSON.stringify(data.Result[0]);
              console.log(data.Result[0])

              document.getElementById("intermediate").innerHTML = JSON.stringify(data.Result[1]);

              document.getElementById("advanced").innerHTML = JSON.stringify(data.Result[2]);

            }
        );
    }

    </script>

而且我正在尝试使用 1 个带有 3 个选项的下拉框：

<div class="output" onload="processForm()">
        <h2><u>Products and Services</u></h2>
        <h4><select>
        <!-- <input type="button" value="test button" onclick="processForm()"> -->
        <p>Car Detailing options</p>
        <option onclick="" value="basic">Basic</option> 
        <option value="intermediate">Intermediate</option> 
        <option value="advanced">Advanced</option> 
            </select>
        <p>Description: </p>
        <p></p>
        <p></p>
        <p></p>
        </h4>
    </div>

使用上面的脚本，我已经可以从数据库中获取项目以显示在页面上，但是我无法将它们放入选项框（我只是对其进行硬编码）以及<p>Description: </p>每次下拉框都用描述填充变化。

感谢任何帮助。

标签： javascripthtmlmysql

解决方案

对于任何在 HTML 文件中查看这是如何完成的并且没有 .php 的人，我有点顿悟并使用以下代码使其工作：

window.onload = function getData() {
            sqlAll = "Select * FROM `Product-Service`";
            var a = document.getElementById("dropdown");
            var x = document.getElementById("Desc");
            var y = document.getElementById("Cost");
            var taxElem = document.getElementById("Tax");
            var procElem = document.getElementById("Processing");
            var totalElem = document.getElementById("Total");
            var pic = document.getElementById("picInsert");

            MySql.Execute(
                "host", 
                "user",
                "pw",
                "db",
                sqlAll,
                function (data) {

              console.log("Single row as string: " + JSON.stringify(data.Result[0]));
              document.getElementById("basicList").innerHTML = (data.Result[0].Name);
              document.getElementById("intermediateList").innerHTML = (data.Result[1].Name);
              document.getElementById("advancedList").innerHTML = (data.Result[2].Name);

这是从表中获取所有值，并按特定值插入它们，如下所示：(data.Result[2].Name)

数据库中的值显示在下拉框中：

<select id="dropdown">
        <option value="empty"></option>
        <option id="basicList" value="0"></option> 
        <option id="intermediateList" value="1"></option> 
        <option id="advancedList" value="2"></option>
            </select>

最后，我使用 if/else 语句来显示我想要的内容：

a.addEventListener('change', function(){
                if (a.value == 0){
                    cost = 59.99;
                    tax = cost * .07;
                    processing = cost * .01;
                    total = cost * 1.08;
                    document.getElementById("Desc").innerHTML = (data.Result[0].Description);
                    document.getElementById("Cost").innerHTML = ("Price: " + data.Result[0].Cost);
                    //taxElem.innerHTML = "Tax: " + tax.toFixed(2);
                    //procElem.innerHTML = "Processing Fee: " + processing.toFixed(2);
                    totalElem.innerHTML = "Total Cost with tax(7%) and processing fee (1%): " + total.toFixed(2);
                    pic.innerHTML = "<img src=\"basic.jpg\">";

做我想做的事。回答这个问题，以防其他人在未来偶然发现这个问题！祝你好运！

推荐阅读