从另一个下拉列表填充Django下拉列表-Javascript

Question

I have a Django + Python website, where user can request a access to a database. So in this form the user has these options.

Environment: This is a drop down list with two values: Development and Production
Permission: This is another drop down list with two values: Read and Read/Write

What I am trying to achieve is:

If Environment == Development
   AddToPermissionDropDownList: Database Owner
else
 Permission

So, as you can see, I want to populate one drop down list based in the selected value of another drop down.

I know that I need to use JavaScript to achieve that, but I am stuck on how to do it.

This is what I have been able to do so far.

models.py

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

forms.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)

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

Since it needs to be populated from the options from back end . you can call a ajax method to get the data from back end on the change event of dropdown-1 , then you have to populate dropdown-2 with data got from the response of the ajax , also you have to pass the value from dropdown-1 with the request. you can either use a get or post request. if it is post request you also need to pass csrf token

Answer 2

This is what I have been able to do so far. The only problem that I am seeing is.

1) In the environment drop down list I select: DEV 1.1) DB OWNER gets added 2) Now change the environment drop down list to: PROD 2.1) DB READER gets added 3) Now change the environment drop down list to: DEV 3.1) DB OWNER gets added again.

I know that I need somehow to cleanup the values in the drop down list, I just don't know yet on where and what code to do.

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