如何显示模板django中数据库中下拉列表中所有项目中所选项目的值

Question

请帮助根据列表（项目）中所选的值自动填写字段（公司/修订），例如，如果在下拉列表中选择“PROJECT2”，则值“02”将在“修订”字段中，值“COMPANY2”“将在“公司”字段中，图片：

我做了什么：models.py在模型中创建了项目“PROJ”（项目名称“project_id”，公司名称“Company”，修订号“Revision”）

class PROJ(models.Model):
User=get_user_model()
author = models.ForeignKey(User, on_delete=models.CASCADE)
project_id=models.CharField(max_length=100, null=True, blank=True, db_index=True)
Company=models.CharField(max_length=100, null=True, blank=True)
Revision=models.CharField(max_length=100, null=True, blank=True)

下一个网址.py

urlpatterns = [ path('software/', views.software, name='software'),

software.html 模板中的

选项 1 创建了一个循环 {% for PROJ in PROJS %} - 显示列表中的所有项目，然后是循环 {% for PROJ in PROJS %} 和条件 {% if PROJ. id == 2 %} 仅在替换数字 2 时手动工作

<label class="col-md-3 col-form-label">Project/Site:</label>
<div class="col-md-9">
<select class="form-select" name="proj_number" id="proj_number">
{% for PROJ in PROJS %}
<option value="{{ PROJ.id }}">{{ PROJ.id }}</option>
{% endfor %}
</select>
</div>
{% for PROJ in PROJS %}
{% if PROJ.id == 2 %}
<label class="col-md-3 col-form-label">Revision:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Revision" placeholder="Revision" id="Revision" value="{{PROJ.Revision}}">
</div>
<label class="col-md-3 col-form-label">Company:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Company" placeholder="Company" id="Company" value="{{PROJ.Company}}">
</div>
</div>
{% endif %}
{% endfor %}

解决方案： if 条件中，需要将数字 2 直接替换为列表 PROJ.id 中所选项目的 id 值 select class="form-select" name="proj_number" id="proj_number"在模板中或通过脚本

if 条件中的

选项 2 直接在模板中添加了对列表 {% if PROJ.id == "proj_number" %} 中所选项目 id 的检查 - 不起作用

<label class="col-md-3 col-form-label">Project/Site:</label>
<div class="col-md-9">
<select class="form-select" name="proj_number" id="proj_number">
{% for PROJ in PROJS %}
<option value="{{ PROJ.id }}">{{ PROJ.id }}</option>
{% endfor %}
</select>
</div>
{% for PROJ in PROJS %}
{% if PROJ.id == "proj_number" %}
<label class="col-md-3 col-form-label">Revision:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Revision" placeholder="Revision" id="Revision" value="{{PROJ.Revision}}">
</div>
<label class="col-md-3 col-form-label">Company:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Company" placeholder="Company" id="Company" value="{{PROJ.Company}}">
</div>
</div>
{% endif %}
{% endfor %}

选项 3 脚本从 PROJ.id 列表中获取所选项目的 id 值并将其发送回模板，但在模板中的 if 条件下，脚本变量不起作用

<script>
var proj_number = document.getElementById("proj_number").value;
document.getElementById('proj_number1').value = proj_number;
</script>
<label class="col-md-3 col-form-label">Project/Site:</label>
<div class="col-md-9">
<select class="form-select" name="proj_number" id="proj_number">
{% for PROJ in PROJS %}
<option value="{{ PROJ.id }}">{{ PROJ.id }}</option>
{% endfor %}
</select>
</div>
{% for PROJ in PROJS %}
{% if PROJ.id == "proj_number1" %}
<label class="col-md-3 col-form-label">Revision:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Revision" placeholder="Revision" id="Revision" value="{{PROJ.Revision}}">
</div>
<label class="col-md-3 col-form-label">Company:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Company" placeholder="Company" id="Company" value="{{PROJ.Company}}">
</div>
</div>
{% endif %}
{% endfor %}

Answer 1

谢谢，我使用 javascript - JSON）））来帮助：

• 视频：https://www.youtube.com/watch?v=h39eMGWmEV4
• 内置模板标签和过滤器json_script： https://docs.djangoproject.com/en/5.0/ref/templates/builtins/
• js数组的过滤器： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

布局

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

浏览量

def software(request):
assert isinstance(request, HttpRequest)
PROJS = PROJ.objects.filter(author=request.user)
return render(
request,
'app/software.html',
{
'PROJS': PROJS,
 'PROJSvalues': list(PROJ.objects.values('id', 'project_id', 'Company', 'Revision', 'SSI' ))
}
)

模板

<div class="col-md-9">
<select class="form-select" name="proj_number" id="proj_number" onchange="PROJ_ID(this)">
{% for PROJ in PROJS %}
<option value="{{ PROJ.id }}">{{ PROJ.project_id }}</option>
{% endfor %}
</select>
</div>
{{ PROJSvalues|json_script:"proj-json" }}    
<script>
let jsondata = JSON.parse(document.getElementById('proj-json').textContent);
//console.log(jsondata);
function PROJ_ID() {
var proj_number = parseFloat(document.getElementById("proj_number").value);
//alert(proj_number);
const result = jsondata.find(({ id }) => id === proj_number);
//console.log(result);
document.getElementById('Revision').value = result['Revision'];
document.getElementById('Company').value = result['Company'];
document.getElementById('SSI').value = result['SSI'];
PFD_CAL();
}
</script>
<label class="col-md-3 col-form-label">Revision:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Revision" placeholder="Revision" id="Revision">
</div>
<label class="col-md-3 col-form-label">Company:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Company" placeholder="Company" id="Company">
</div>

，如果有更简单的方法，请告知，先谢谢了！