динамически выпадающий в nodejs mysql

Question

Я хочу изменить регион в соответствии с клиентами, когда пользователь щелкает и выбирает клиента, а затем в раскрывающемся списке регион изменяется в соответствии с регионом, связанным с этим клиентом из базы данных enter code here

Вот моя таблица клиента:

Вот моя таблица регионов, в которой 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>

Вот страница для добавления области: Вот страница для добавления области

Answer 1

По сути, решение сводится к следующему:

//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список

Answer 2

Вам необходимо добавить ajax-запрос к событию onChange для field_id = client_id , чтобы выбрать регионы на основе выбранных client_id .Для ответа вы можете спроектировать сервер в соответствии с вашими потребностями, вы можете сгенерировать HTML на стороне сервера или получить необработанный результат из базы данных в ответ, а затем сгенерировать HTML из него на стороне клиента.Когда вы получите подходящий формат HTML для опций выбора, добавьте этот HTML к region_id select.