Javascript 获取<；中的下拉框更改值；p>；（来自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>

log（“第一个脚本测试”）；
函数processForm（）{
设sqlStmt=“”；
sqlStmt=“从‘产品服务’中选择*”；
sqlCost=“从“产品服务”中选择成本”；
sqlName=“从“产品服务”中选择名称”；
sqlDesc=“从“产品服务”中选择描述”；
console.log（“第二次脚本测试”）；
MySql.Execute(
“主持人”，
“用户”，
"pw",，
“db”，
sqlDesc，
功能（数据）{
document.getElementById（“输出”）.innerHTML=数据；
//console.log（“数据参数：”+数据）；
var dataAsString=JSON.stringify（数据）；
document.getElementById（“输出”）.innerHTML=dataAsString；
//console.log（“作为obj的单行：+data.Result[0]）；
log（“作为字符串的单行：+JSON.stringify（data.Result[0]））；
//console.log（“单行、单列：+data.Result[0].name”）；
document.getElementById（“basic”）.innerHTML=JSON.stringify（data.Result[0]）；
console.log（data.Result[0]）
document.getElementById（“中间”）.innerHTML=JSON.stringify（data.Result[1]）；
document.getElementById（“advanced”）.innerHTML=JSON.stringify（data.Result[2]）；
}
);
}

我尝试使用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>

产品和服务
汽车细节选项

基本的
中间的
先进的
说明：

使用上面的脚本，我已经可以从数据库中获取要在页面上显示的项目，但是我在将它们放入选项框（我只是硬编码了它）以及在每次下拉框更改时用描述填充

说明：

时遇到了问题

谢谢你的帮助

不要错过使用$（document.ready（function（）{}）并在导入jQuery时使用.change（）函数，用于检测选择框的更改

$（文档）.ready（函数（）{
$（“.selecting”）.change（函数（）{
…你的js代码在这里。。。
});
});
//或者不导入jquery js代码：
addEventListener（“DOMContentLoaded”，函数（事件）{
document.getElementById（“.selecting”）.onchange=function（）{
…你的js代码在这里。。。
};
});

产品和服务
汽车细节选项

基本的
中间的
先进的
说明：




不要错过使用$（文档）.ready（函数（）{}）并在导入jQuery时使用.change（）函数，用于检测选择框的更改


$（文档）.ready（函数（）{
$（“.selecting”）.change（函数（）{
…你的js代码在这里。。。
});
});
//或者不导入jquery js代码：
addEventListener（“DOMContentLoaded”，函数（事件）{
document.getElementById（“.selecting”）.onchange=function（）{
…你的js代码在这里。。。
};
});

产品和服务
汽车细节选项

基本的
中间的
先进的
说明：




对于任何在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\">";

a.addEventListener（'change'，function（）{
如果（a.value==0）{
成本=59.99；
税=成本*.07；
加工=成本*.01；
总计=成本*1.08；
document.getElementById（“Desc”）.innerHTML=（data.Result[0].Description）；
document.getElementById（“成本”）.innerHTML=（“价格：”+data.Result[0]。成本）；
//taxElem.innerHTML=“Tax:+Tax.toFixed（2）；
//procElem.innerHTML=“处理费：”+处理.toFixed（2）；
totalElem.innerHTML=“含税总成本（7%）和处理费（1%）：”+总计.toFixed（2）；
pic.innerHTML=“”；

做我想做的事。回答这个问题以防将来其他人偶然发现！祝你好运！
对于任何在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\">";

a.addEventListener（'change'，function（）{
如果（a.value==0）{
成本=59.99；
税=成本*.07；
过程