Динамическое раскрывающееся меню в nodejs mysql
Я хочу изменить регион в соответствии с клиентами, когда пользователь щелкает и выбирает клиента, а затем раскрывающийся список региона изменяется в соответствии с регионом, который связан с этим клиентом из базы данных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>Вот страница для добавления области:Вот страница для добавления области
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам необходимо добавить запрос ajax в событие onChange для field_id = ID клиента, чтобы получать регионы на основе выбранного ID клиента. Для ответа вы можете спроектировать сервер в соответствии с вашими потребностями, вы можете либо сгенерировать HTML на стороне сервера, либо получить необработанный результат из базы данных в ответ, а затем сгенерировать HTML из него на стороне клиента. Когда вы получите подходящий HTML-формат для выбора параметров, добавьте этот HTML-код в region_id select.
Как добавить ajax. не могли бы вы помочь мне
По сути, решение сводится к следующему:
//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 и раскрывающегося списка. Это примерно логика.
да сэр!! Я знаю, но как мне его отправить, потому что я не знаю об ajax
Сэр, я думаю, что вы не совсем понимаете вопрос. Теперь вопрос в том, что я хочу сделать два раскрывающихся списка: одно - страна, а второе - город, и когда пользователь выбирает страну из первого раскрывающегося списка, то во втором раскрывающемся списке города этой страны будут показаны, но из базы данных.
Ржу не могу. Контекст вашего вопроса меняется быстрее, чем я публикую ответы. Вы начали в заголовке своего вопроса с «заполнить одно раскрывающееся меню», затем оказалось, что это «один раскрывающийся список и div», теперь это «два раскрывающихся списка и div», и Бог знает, чем вы собираетесь закончить. Это заставляет меня думать, что это вы, в первую очередь, не совсем понимаете вопрос.
Тем не менее, логика, продемонстрированная выше, легко расширяется для произвольного количества элементов, и, я считаю, вы или тот, кто прилагает минимальные усилия, можете понять это и реализовать нужным образом, что достаточно для меня, чтобы отказаться от этой конкретной темы на эта точка.
Спасибо за вашу любезную поддержку
и, кстати, я не меняю свой вопрос, если вы видите мой код, тогда есть два раскрывающихся списка: сначала клиент, а второй раскрывающийся список - это регион, который будет изменяться в соответствии с раскрывающимся списком клиента, это вопрос.
Я хочу сделать то же самое js-tutorials.com/javascript-tutorial/…, используя значения из базы данных, не закодированные жестко.