如果数据库中给出了可能的最大楼层数，如何在 html 表单中设置包含建筑物楼层的 select 框

Question

我想以 HTML 形式在 <select> 下拉列表中显示从 1 到最大值 number_of_ floors 的建筑物楼层。 floors 所在的 block 选自另一个 <select> 列表，如 Output form 所示。列表中的每个选项都包含 block_id 作为值和 block_name 作为显示的文本。

block_id、block_name 和 number_of_floors 存储在 MySql 数据库中，其中 block_id 是主键。我想要做的是使用此 block_id 找到 number_of_floors，然后使用 for 循环，在 <select> 标记内显示每个楼层。这是所有文件的代码：

room.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>

房间views.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})

block.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>

屏蔽views.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')

我是 Django 和一般 Web 开发的新手。所以，如果你能花时间解释我需要做什么，我将不胜感激。

Answer 1

经过大量挖掘，我终于找到了一种方法来做我想做的事。解决方案是 AJAX。这是文件现在的样子：

room.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>

房间views.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'),

]

希望这对有需要的人有所帮助。在评论中留下您的任何疑问或问题，我会尽力帮助您。另外，如果有更好的方法，请分享您的答案。

如果数据库中给出了可能的最大楼层数，如何在 html 表单中设置包含建筑物楼层的 select 框

How to set a select box containing the floors of a building inside an html form if the maximum number of floors possible is given in a database

html

javascript

django

ajax

jquery