Django 模板 select 具有隱藏和顯示的特定值

Question

這是我的 model 和我的選擇：

class Method(models.Model):
    principle = models.CharField(choices=PRINCIPLE_CHOICES, max_length=2)
    method = models.CharField(choices=METHOD_CHOICES, max_length=4)

class PartMethodForm(forms.ModelForm):
    principle = forms.ChoiceField(
        widget=forms.Select(
        attrs={'class': 'btn btn-primary'}), choices=PRINCIPLE_CHOICES)
    method = forms.ChoiceField(
        widget=forms.Select(
        attrs={'class': 'btn btn-primary'}), choices=METHOD_CHOICES)

METHOD_CHOICES=(
('1.1','Method 1.1'),
('1.4','Method 1.4'),
('2.2','Method 2.2'),
('10.4','Method 10.4'),
('11.3','Method 11.3')
)

PRINCIPLE_CHOICES=(
('1','Principle 1'),
('2','Principle 2'),
('10','Principle 10'),
('11','Principle 11')
)

在我看來，我正在將我的表單和過濾列表傳遞給 select，例如

method = ['1.1','2.2','10.4']
principle = ['1','2']

我想要實現的是以下幾點：

1. select 一個原理（不在列表中的原理應該禁用選擇）
2. when principle selected then show only possible methods eg if principle 1 -> methods 1.1 and methods 1.4 possible
3. select 一種方法（不在列表中的方法應禁用以供選擇）

有人可以幫忙嗎？

我只提出了這種方法：

{% block content %}
<div class="container">

  <script type="text/javascript">

    function showmethod() {
        if (document.getElementById('1').checked) {

            document.getElementById('div0').style.display = 'block';
            document.getElementById('div').style.display = 'block';
        }
        else {
            document.getElementById('div').style.display = 'none';
            document.getElementById('div0').style.display = 'none';
        } 

    }

  </script>


  <h5><b>Choose principle</b></h5>
  <form class="mt-5" method="post" name="method-form" id="method-form">
  {% csrf_token %}

    <div class="col col-md-12">
    {% for value, name in form.fields.principle.choices %}

    {% if value in principle %}
      <input type="radio" onclick="javascript:showmethod();" id="{{ value }}" name="principle" value="{{ value }}">
      <label for="{{ value }}"><b>Principle{{ value }}</b><br><br>{{ name }}</label>
    {% else %}
      <input type="radio" onclick="javascript:showmethod();" id="{{ value }}" name="Principle" value="{{ value }}" disabled>
      <label for="{{ value }}"><b>Principle{{ value }}</b><br><br>{{ name }}</label>
    {% endif %}

    {% endfor %}
    </div>

    <h5>Choose method</h5>
    <div class="col col-md-12" id="div0" style="display:none">
    {% for value, name in form.fields.method.choices %}
        {% if value|cut:'everything with point and after' %}
        {% if value in method %}
        <div class="col col-md-2" id="div" style="display:none">
          <input type="radio" id="{{ value }}" name="method" value="{{ value }}">
          <label for="{{ value }}"><b>Method{{ value }}</b><br><br>{{ name }}</label>
        </div>
         {% else %}
          <input type="radio" id="{{ value }}" name="method" value="{{ value }}" disabled>
          <label for="{{ value }}"><b>Method{{ value }}</b><br><br>{{ name }}</label>
        {% endif %}
        {% endif %}
    {% endfor %}
  </div>

      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        <button class="btn btn-primary float-right" type="submit">Submit</button>
      </div>
    </div>
  </div>
  </form>
</div>


{% endblock %}

Answer 1

所以我想出了一個解決方案。

首先，我改變了原則和方法現在在以原則為鍵的字典中的上下文。

其次，長度和切片的使用對於獲得原則值很重要。

第三，在 javascript 中創建一個 const dict 並隱藏/顯示指定的內容。

這是我的模板：

{% block content %}
{% if form.errors %}
    {% for field in form %}
        {% for error in field.errors %}
            <div class="alert alert-danger">
                <strong>{{ field.name }} Field: {{ error|escape }}</strong>
            </div>
        {% endfor %}
    {% endfor %}
    {% for error in form.non_field_errors %}
        <div class="alert alert-danger">
            <strong>{{ error|escape }}</strong>
        </div>
    {% endfor %}
{% endif %}
<div class="container">

  <script type="text/javascript">

    function showmethod(id) {
        const dict = {
          1: ["1.1","1.4"],
          2: ["2.2"],
          10: ["10.4"],
          11: ["11.1"]
        };
        const arr = dict[id];
        const principle = ["1","2","10","11"];

        for (var k = 0; k < principle.length; k++) {
          if (principle[k] != id) {
            var arr2 = dict[principle[k]];
            for (var j = 0; j < arr2.length; j++) {
              if (document.getElementById(arr2[j])) {
                document.getElementById(arr2[j]).style.display = 'none';
                if (document.getElementById(arr2[j]).checked) {
                  document.getElementById(arr2[j]).checked = false;
                }
              }
            }
          }
        }   

        if (document.getElementById(id).checked) {
          for (var i = 0; i < arr.length; i++) {
            document.getElementById(arr[i]).style.display = 'contents';
            document.getElementById("div").style.display = 'contents';
          }
        }
    }

  </script>



  <form class="mt-3" method="post" name="method-form" id="method-form">
  {% csrf_token %}
    <div class="col col-md-12" style="padding-left: 0px;">
      {% for value, name in form.fields.principle.choices %}
        {% if value in dics.keys %}
          {% if form.principle.value == value %} 
            <div class="btn custom-btn" name="principle">
              <input type="radio" onclick="javascript:showmethod(value);" id="{{ value }}" name="principle" value="{{ value }}" checked>
              <label for="{{ value }}"><b>Principle {{ value }}</b><br><br>{{ name }}</label>
            </div>
          {% else %}
            <div class="btn custom-btn" name="principle">
              <input type="radio" onclick="javascript:showmethod(value);" id="{{ value }}" name="principle" value="{{ value }}">
              <label for="{{ value }}"><b>Principle {{ value }}</b><br><br>{{ name }}</label>
            </div>
          {% endif %}
        {% else %}
          <div class="btn custom-btn" name="principle">
            <input type="radio" onclick="javascript:showmethod(value);" id="{{ value }}" name="principle" value="{{ value }}" disabled>
            <label for="{{ value }}"><b>Principle {{ value }}</b><br><br>{{ name }}</label>
          </div>
        {% endif %}
      {% endfor %}
    </div>
    <br>
    <div class="col col-md-12" id="div" style="display:none">
      {% for value, name in form.fields.method.choices %}
          {% for keys, val in dics.items %}
            {% if value|length > 3 %}
              {% if value|slice:2 == keys %}
                {% if value in val %}
                  {% if form.method.value == value %}
                    <div class="btn custom-btn" id="{{ value }}" name="method" style="display:none">
                      <input type="radio" id="method_{{ value }}" name="method" value="{{ value }}" checked>
                      <label for="method_{{ value }}"><b>Method {{ value }}</b><br><br>{{ name }}</label>
                    </div>
                  {% else %}
                    <div class="btn custom-btn" id="{{ value }}" name="method" style="display:none">
                      <input type="radio" id="method_{{ value }}" name="method" value="{{ value }}">
                      <label for="method_{{ value }}"><b>Method {{ value }}</b><br><br>{{ name }}</label>
                    </div>
                  {% endif %}
                {% else %}
                  <div class="btn custom-btn" id="{{ value }}" name="method" style="display:none">
                    <input type="radio" id="method_{{ value }}" name="method" value="{{ value }}" disabled>
                    <label for="method_{{ value }}"><b>Method {{ value }}</b><br><br>{{ name }}</label>
                  </div>
                {% endif %}
              {% endif %}
            {% else %}
              {% if value|slice:1 == keys %}
                {% if value in val %}
                  {% if form.method.value == value %}
                    <div class="btn custom-btn" id="{{ value }}" name="method" style="display:none">
                      <input type="radio" id="method_{{ value }}" name="method" value="{{ value }}" checked>
                      <label for="method_{{ value }}"><b>Method {{ value }}</b><br><br>{{ name }}</label>
                    </div>
                  {% else %}
                    <div class="btn custom-btn" id="{{ value }}" name="method" style="display:none">
                      <input type="radio" id="method_{{ value }}" name="method" value="{{ value }}">
                      <label for="method_{{ value }}"><b>Method {{ value }}</b><br><br>{{ name }}</label>
                    </div>
                  {% endif %}
                {% else %}
                  <div class="btn custom-btn" id="{{ value }}" name="method" style="display:none">
                    <input type="radio" id="method_{{ value }}" name="method" value="{{ value }}" disabled>
                    <label for="method_{{ value }}"><b>Method {{ value }}</b><br><br>{{ name }}</label>
                  </div>
                {% endif %}
              {% endif %}
            {% endif %}     
          {% endfor %}
      {% endfor %}
    </div>
    <div class="col-md-6">
        <div class="well">
          <button class="btn btn-primary float-right" type="submit">Weiter</button>
    </div>
  </form>
</div>


{% endblock %}