在nodejs mysql中动态下拉 [英] dynamically dropdown in nodejs mysql
本文介绍了在nodejs mysql中动态下拉的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当用户单击并选择一个客户端时,我想根据客户端更改区域,然后根据数据库中与该客户端相关的区域下拉列表更改区域enter code here
I want to change the region according to the clients when a user click and select a client then the region dropdown change according to the region that are related to that client from databaseenter code here
这是我的客户表格:
这是我的Region表,其中client_id是外键:
这是我的代码
<div class="container">
<h3>Add Area</h3>
<form action="/add_areas" method="POST">
<!--input type="text" placeholder="DistributorID" name="distributor_id"-->
<input type="text" placeholder="Area Name" name="area_name" required="">
<!-- <input type="text" placeholder="Contact ID" name="contact_id" required=""> -->
<!-- <label>Client ID</label> -->
<select name="client_id" required="">
<option disabled selected value> -- select a Client -- </option>
<%for(i=0; i<clients.length; i++){%>
<option value="<%= clients[i].id%>"><%= clients[i].client_name %></option>
<%}%>
</select>
<select name="region_id" required="">
<option disabled selected value> -- select a Region -- </option>
<%for(i=0; i<regions.length; i++){%>
<option value="<%= regions[i].id%>"><%= regions[i].region_name %></option>
<%}%>
</select>
<br>
<button type="submit">Submit</button>
</form>
<br>
<%if(areas.length>0) { %>
<h3>All Existing Areas</h3>
<!--For view-->
<div class="table-rsponsive">
<table class="table table-striped table-bordered table-sm " cellspacing="0" width="100%">
<tr>
<th>Area Name</th>
<th>Client </th>
<th>Region </th>
<th colspan="2">Action</th>
</tr>
<% for(var i=0; i<areas.length; i++) {%>
<tr>
<td><%= areas[i].area_name %></td>
<td><%= areas[i].client_name %></td>
<td><%= areas[i].region_name %></td>
<td><a href="/edit_areas/<%= areas[i].id %>"><button class="btn-primary">Edit</button></a></td>
<td><a href="/delete_areas/<%= areas[i].id %>" onclick="javascript: return confirm('Are you SURE? If you delete this area All the town belongs to <%= areas[i].area_name %> area will automatically deleted!!');"><button class="btn-danger">Delete</button></a></td>
</tr>
<% } %>
</table>
</div>
<% }
else{ %>
<h3>No Area Found!!</h3>
<% } %>
<!--goto dashboard button-->
<button type="submit" class="btn btn-primary btn-block" onclick="window.location.href='/dashboard.html'">Return to dashboard</button>
</div>
这是要添加区域的页面: 这是要添加区域的页面
推荐答案
基本上,解决方案归结为以下内容:
Basically, solution boils down to the following:
//These are your target elements
const client = document.querySelector('#client');
const region = document.querySelector('#region');
const table = document.querySelector('#table');
//POST username upon change event and modify table 'div' and region'select' innerHTML's accordingly
client.addEventListener('change', function () {
let xhr = new XMLHttpRequest();
let user = this.value;
xhr.open('POST', '/getRegionsByUser', true);
xhr.send(user);
xhr.onload = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
let regions = JSON.parse(this.responseText);
/* expected JSON-formatted string {list:[region1, region2, ...] */
regions.list.forEach(region => {
region.innerHTML += '<option value="'+region+'">'+region+'</option>';
table.innerHTML += '...';
});
}
};
});
服务器端脚本在很大程度上取决于您的环境,从概念上讲,它应该按用户名执行SQL选择区域并以JSON格式的列表进行响应
server-side scripting depends heavily on your environment, conceptually, it is supposed to do SQL-select regions by username and responding with JSON-formatted list
这篇关于在nodejs mysql中动态下拉的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文