【问题标题】: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 表单中设置包含建筑物楼层的选择框
【发布时间】:2022-01-03 17:04:40
【问题描述】:

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

block_idblock_namenumber_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>

房间视图.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 开发的新手。所以,如果您能花时间解释我需要做什么,我将不胜感激。

【问题讨论】:

  • 我无法真正评论您的 django 问题,但请注意您的主键(可能会或可能不会导致您的问题):楼层号通常无法识别房屋,只需描述它。你可以吗?有两栋不同楼层的房子(在同一个地方?)?例如。如果您复制数据库中的某些行并仅替换最大房间数,它会给出逻辑上有效的条目吗?如果您出售预制房屋,并且拥有 2、3 和 4 层的“维多利亚式联排别墅风格 G”模型(因此楼层编号标识一个变体),则可能有意义的场景。
  • 所以您希望最大楼层数根据您从表单下拉菜单中选择的区块而改变?
  • @Solarflare 我实际上有一个自动递增的房间号,我不必在表格中输入

标签: javascript html jquery django ajax


【解决方案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>

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

]

希望这能帮助有需要的人。将您的任何疑问或问题留在 cmets 中,我会尽力帮助您。另外,如果有更好的方法,请分享您的答案。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多