從另一個下拉列表填充Django下拉列表-Javascript

Question

我有一個Django + Python網站，用戶可以在其中請求訪問數據庫。 因此，以這種形式，用戶可以選擇這些選項。

環境：這是一個具有兩個值的下拉列表：開發和生產
權限：這是另一個具有兩個值的下拉列表：讀取和讀取/寫入

我想要實現的是：

If Environment == Development
   AddToPermissionDropDownList: Database Owner
else
 Permission

因此，如您所見，我想根據另一個下拉列表的選定值來填充一個下拉列表。

我知道我需要使用JavaScript來實現這一目標，但是我仍然堅持如何做到這一點。

到目前為止，這是我能夠做到的。

models.py

class NewAccessRequest(models.Model):
permission_needed = models.CharField(max_length=25,verbose_name='Permissions')

表格

class AccessRequestForm(ModelForm):
environment= forms.ChoiceField(choices=ENVIRONMENT_CHOICES,label="",initial='',widget=forms.Select(attrs={'id':'environment','onchange':'changePermissions()'}), required=True)
permission_needed = forms.ChoiceField(initial='',widget=forms.Select(), required=True)

access.html

<form>
{% csrf_token %}
   <label for="{{ form.environment.id_for_label }}">Environment:</label>
    <p>{{form.environment}}</p>
<script>
function changePermissions() {
var EnvChosen = document.getElementById("environment").value;
if (EnvChosen == "DEV") {
document.getElementById("id_business_reason").value = "This is a test"

        }
    }
    </script>
</form>

Answer 1

由於需要從后端的選項中進行填充。 您可以調用ajax方法在dropdown-1的change事件上從后端獲取數據，然后必須使用從ajax響應獲得的數據填充dropdown-2，還必須傳遞dropdown-的值1與請求。 您可以使用get或post請求。 如果是后期請求，則還需要傳遞csrf令牌

Answer 2

到目前為止，這是我能夠做到的。 我看到的唯一問題是。

1）在環境下拉列表中，我選擇：DEV 1.1）添加了DB OWNER 2）現在將環境下拉列表更改為：PROD 2.1）添加了DB READER 3）現在將環境下拉列表更改為：DEV 3.1） DB OWNER被再次添加。

我知道我需要某種方式來清理下拉列表中的值，我只是不知道在哪里以及要執行什么代碼。

<script>
function changePermissions() {
   var EnvChosen = document.getElementById("environment").value;
   var selectList = document.getElementById("id_permission_needed")

   if (EnvChosen == "DEV") {
        var option = document.createElement("OPTION");
        var txt = document.createTextNode("DB OWNER");
        option.appendChild(txt);
        selectList.insertBefore(option, selectList.lastChild);
       }
   if (EnvChosen == "PROD") {
         var option = document.createElement("OPTION");
         var txt = document.createTextNode("DB READER");
         option.appendChild(txt);
         selectList.insertBefore(option, selectList.lastChild);
              }
          }
    </script>