从另一个下拉列表Javascrip填充Django下拉列表

Question

我有一个Django+Python网站，用户可以请求访问数据库。所以在这个表单中，用户有这些选项。在

环境：这是一个下拉列表，包含两个值：Development和Production
权限：这是另一个下拉列表，包含两个值：Read和Read/Write

我要达到的目标是：

If Environment == Development
   AddToPermissionDropDownList: Database Owner
else
 Permission

因此，如您所见，我希望根据另一个下拉列表的选定值填充一个下拉列表。在

我知道我需要使用JavaScript来实现这一点，但我一直不知道如何去做。在

这就是我目前所能做的。在

在模型.py在

^{pr2}$

在表单.py在

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)

在访问.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

因为它需要从后端的选项中填充。 您可以在dropdown-1的change事件中调用ajax方法从后端获取数据，然后您必须用从ajax响应获得的数据填充dropdown-2，还必须将dropdown-1的值与请求一起传递。您可以使用get或post请求。如果是post请求，则还需要传递csrf令牌

Answer 2

这就是我目前所能做的。我看到的唯一问题是。在

1）在环境下拉列表中，我选择：DEV 1.1）添加数据库所有者 2） 现在将“环境”下拉列表更改为：PROD 2.1）添加DB读取器 3） 现在将环境下拉列表更改为：DEV 再次添加DB。在

我知道我需要以某种方式清理下拉列表中的值，只是不知道在哪里以及要做什么代码。在

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