nodejs mysql中的动态下拉列表

Posted 2023-02-24

【中文标题】nodejs mysql中的动态下拉列表

【英文标题】：dynamically dropdown in nodejs mysql

【发布时间】：2019-05-24 13:24:47

【问题描述】：

当用户单击并选择一个客户端时，我想根据客户端更改区域，然后区域下拉列表根据与该客户端相关的区域从数据库enter 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" >
			    	<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>

这里是添加区域的页面： Here is the page to add area

【问题讨论】：

我想通过使用数据库中未硬编码的值来实现 js-tutorials.com/javascript-tutorial/…。

js-tutorials.com/javascript-tutorial/… 。我想要像那个链接中的输出一样的输出，但是在这个链接中，输入是硬编码的，我想要根据数据库。

【参考方案1】：

您需要在 onChange 事件上为 field_id=client_id 添加 ajax 请求，以根据选定的 client_id 获取区域。对于响应，您可以根据需要设计服务器，您可以在服务器端生成 HTML，也可以从数据库中获取原始结果作为响应，然后在客户端从它生成 HTML。当您获得适合选择选项的 HTML 格式时，将该 html 附加到 region_id 选择。

【讨论】：

如何添加ajax。你能帮我吗

【参考方案2】：

基本上，解决方案归结为以下几点：

//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 格式的列表进行响应

【讨论】：

如何显示 mysql 的结果。当我在第一个下拉列表中选择客户端，然后根据数据库中的该客户端在第二个下拉列表中显示区域时？？

客户端没有硬编码，可以更改，一个客户端可能有多个区域，我想要一个可以相应更改的解决方案。

当我们选择一个客户端时，只有那些属于该客户端的区域才会出现在区域下拉列表中

我想通过使用数据库中的值来像 js-tutorials.com/javascript-tutorial/… 那样做

您可以将您的 client_id 发布到服务器，在服务器端执行SELECT region_name FROM regions WHERE client_id=received_value，以查询结果响应，并更改您的 div 和下拉内容。大致是这样的逻辑。