How can display values of item selected in dropdownlist all items from db in template django

Question

Please help to make the fields (company/revision) automatically filled in depending on the selected value in the list (project), for example, if "PROJECT2" is selected in the drop-down list, then the value "02" will be in the "Revision" field, and the value "COMPANY2" " will be in the "Company" field, picture: enter image description here

What I did: models.py created projects "PROJ" in models (project name "project_id", company name "Company", revision number "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)

next urls.py

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

option 1 in the software.html template made a loop {% for PROJ in PROJS %} - displays all projects in a list, and then the loop {% for PROJ in PROJS %} and the condition {% if PROJ.id == 2 %} only works manually when replacing the number 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 %}

Solution: in the if condition, you need to replace the number 2 with the id value of the selected project from the list PROJ.id select class="form-select" name="proj_number" id="proj_number" directly in the template or through a script

option 2 in the if condition added a check for the id of the selected project from the list {% if PROJ.id == "proj_number" %} directly in the template - does not work

<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 %}

option 3 script with getting the id value of the selected project from the PROJ.id list and sending it back to the template, but in the if condition in the template the script variable does not work

<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 %}