对这件事还不熟悉,似乎找不到这个问题的答案。首先,下拉菜单呈现给ejs模板。我正在尝试让第二个下拉列表根据第一个下拉列表的选择进行更新。我可以调用ajax并将值放到第二个下拉列表中。填充第二个下拉列表的mysql查询是硬编码的,我需要找到一种动态的方法。查询结果需要根据html下拉选项进行更改
应用程序.js
var express = require("express");
var app = express();
var mysql = require("mysql");
var path = require('path');
app.set("view engine","ejs");
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
var con;
app.get("/",function(req,res){
con.query("SELECT DISTINCT category FROM gameinfo",function(err,result){
if(err) throw err;
res.render('home',{result:result});
});
});
//**part it says "3pk" needs to be dynamic**
app.get("/test",function(req,res){
con.query("SELECT DISTINCT gamename FROM gameinfo WHERE category ='3PK'",function(err,result){
if(err) throw err;
res.send(result);
});
});
home.ejs文件
<select name ="newCategoryD" id ="catSelection">
<% for (var i = 0; i < result.length; i++){ %>
<option>
<%=result[i].category %>
</option>
<% } %>
</select>
<button id = "categoryBox">select this</button>
<br></br>
<div>
<select id="games" ></select>
</div>
<script>
$(document).ready(function(){
$('#categoryBox').click(function(){
$.ajax({
type:'GET',
url:'/test',
dataType:'json',
success: function(data){
$('#games').empty();
for (var i = 0; i < data.length; i++){
$('#games').append('<option>'+data[i].gamename+'</option>')
}
}
});
});
});
</script>
非常感谢您的帮助
1条答案
按热度按时间mnowg1ta1#
将javascript更改为:
您的服务器代码是: