我想在 HTML 表單的下拉串列中顯示建筑物的樓層1到最大值。在其中存在從另一選擇串列中所示的輸出方式。串列中的每個選項都包含as 值和顯示的文本。number_of_ floors<select>blockfloors<select>block_idblock_name
block_id,block_name并number_of_floors存盤在block_id主鍵所在的 MySql 資料庫中。我想要做的是使用它block_id來查找number_of_floors，然后使用 for 回圈，在<select>標簽內顯示每個樓層。這是所有檔案的代碼：
房間.html
<!DOCTYPE html>
<html>
<head>
<title>Room</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Room</h1>
<form method="post">
{% csrf_token %} Room Name
<br>
<input type="text" name="room_name" value="">
<br> Room Type
<br>
<select class="" name="room_type">
<option value="Class Room">Class Room</option>
<option value="Department">Department</option>
<option value="Club">Club</option>
<option value="Lab">lab</option>
<option value="Other">Other</option>
</select>
<br> Block Number
<br>
<select class="" name="block_number">
{% for block in blocks %}
<option value="{{ block.block_number }}">{{ block.block_name }}</option>
{% endfor %}
</select>
<br> Floor
<br>
<select class="" name="floor">
<option selected disabled>Choose a Floor</option>
</select>
<br>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
房間視圖.py
from django.shortcuts import render
from room.models import Room
from block.models import Block
def room(request):
blocks = Block.objects.all()
if request.method == 'POST':
ob = Room()
ob.room_name = request.POST.get('room_name')
ob.room_type = request.POST.get('room_type')
ob.block_number = request.POST.get('block_number')
ob.floor = request.POST.get('floor')
ob.save()
return render(request, 'room/room.html', {'blocks': blocks})
塊.html
<!DOCTYPE html>
<html>
<head>
<title>Block</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Block</h1>
<form method="post">
{% csrf_token %}
Block Number
<br>
<input type="number" name="block_number" value="">
<br>
Block Name
<br>
<input type="text" name="block_name" value="">
<br>
Number Of Floors
<br>
<input type="number" name="number_of_floors" value="">
<br>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
塊視圖.py
from django.shortcuts import render
from block.models import Block
# Create your views here.
def block(request):
if request.method == 'POST':
ob = Block()
ob.block_name = request.POST.get('block_name')
ob.number_of_floors = request.POST.get('number_of_floors')
ob.save()
return render(request, 'block/block.html')
I am new to Django and web development in general. So, I would really appreciate it if you could take the time to explain what I need to do.
uj5u.com熱心網友回復：
經過大量的挖掘，我終于找到了一種方法來做我想做的事。解決方案是 AJAX。這是檔案現在的樣子：
房間.html
<!DOCTYPE html>
<html>
<head>
<title>Room</title>
<!--link rel="stylesheet" href="style.css"-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function fun() {
$.ajax({
type: 'GET',
url: '/room/blocks-json',
success: function (response) {
//console.log(response.data);
const blockData = response.data;
var blockNumber = document.getElementById("block_ddl").value;
var options = "<option selected disabled>--Select a floor--</option>";
var floors, i;
$.each(blockData, function (index, item) {
if (item.block_number == blockNumber) {
floors = item.number_of_floors;
//console.log(floors);
for (i = 1; i <= floors; i ) {
options = "<option value='" i "'>" i "</option>";
}
document.getElementById('floor_ddl').innerHTML = options;
}
});
},
error: function (error) {
console.log(error)
}
});
}
</script>
</head>
<body>
<h1>Room</h1>
<form method="post">
{% csrf_token %}
Room Name
<br>
<input type="text" name="room_name" value="">
<br>
Room Type
<br>
<select class="" name="room_type">
<option value="Class Room">Class Room</option>
<option value="Department">Department</option>
<option value="Club">Club</option>
<option value="Lab">lab</option>
<option value="Other">Other</option>
</select>
<br>
Block Number
<br>
<select class="" name="block_number" id="block_ddl" onchange="fun()">
<option selected disabled>--Choose a Block--</option>
{% for block in blocks %}
<option value="{{ block.block_number }}">{{ block.block_name }}</option>
{% endfor %}
</select>
<br>
Floor
<br>
<select class="" name="floor" id="floor_ddl">
<option selected disabled>--Select a floor--</option>
</select>
<br>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
房間視圖.py
from django.shortcuts import render
from django.http import JsonResponse
from room.models import Room
from block.models import Block
# Create your views here.
def room(request):
blocks = Block.objects.all()
if request.method == 'POST':
ob = Room()
ob.room_name = request.POST.get('room_name')
ob.room_type = request.POST.get('room_type')
ob.block_number = request.POST.get('block_number')
ob.floor = request.POST.get('floor')
ob.save()
return render(request, 'room/room.html', {'blocks': blocks})
def get_json_block_data(request):
ob_val = list(Block.objects.values())
context = {
'data': ob_val
}
return JsonResponse(context)
我還需要對房間 url.py 檔案進行以下更改
房間 url.py
from django.conf.urls import url
from room import views
urlpatterns = [
url('rom/', views.room),
url('blocks-json/', views.get_json_block_data, name='blocks-json'),
]
希望這會幫助有需要的人。在評論中留下您的任何疑問或問題，我會盡力幫助您。另外，如果有更好的方法，請分享您的答案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/406642.html
標籤：