Revision c55cc99b-8bb2-4534-9dc7-130683dfbfa8

I have a problem since yesterday. I want to build a cloudpage which is use to save some informations filled by the customer. I need 2 dropdown list, which the options of the second one, depends on the value of the first one, and that need to be dynamic.

In fact, if the customer choose a value (example : X), the second dropdown list need to have as many options as we have in a Data extension that contains a colum with the value 'X'.

I have two different issues :

1°) My AMP Script, that requesting on my DE, working when i'm using it in the Body to create some options, but as soon I put it in the onChange function, that doing nothing. Is it possible to do that ? 

2°) I fixed a value to my variable "yourDep", 44, because I don't know how to set the This.value to my AMPSCRIPT variable to permit me to do the request on the DE.

There is my code :

```
<!DOCTYPE html>
<html>
 <head>
 <script>
   
function adaptDistrib(){

distributeurSel.length = 1;

%%[

SET @distriDE = "ARO_TEST_DISTRI"

SET @yourDep = "44"

SET @depRowset = LookupRows(@distriDE, "Departement", @yourDep)
SET @depRowcount = Rowcount(@depRowset)

IF @depRowcount > 1 THEN

FOR @i=1 TO @depRowcount DO

  SET @depRow = Row(@depRowset, @i)
  SET @depName = Field(@depRow, "Name")
]%%

distributeurSel.options[distributeurSel.options.length] = new Option(%%=v(@depName)=%%, %%=v(@depName)=%%);

%%[
    NEXT @i
    ENDIF
]%%

}
   
window.onload = function() {
  var regionSel = document.getElementById("region");
  var distributeurSel = document.getElementById("distributeur");
}
</script>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style class="main_style">
.layout-canvas-c {
  background-color: #fff;
  border: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
}
.layout-canvas-c > .header,
.layout-canvas-c > .section,
.layout-canvas-c > .footer {
  position: relative;
  overflow: hidden;
  width: 100%;
  word-wrap: break-word;
}
.layout-canvas-c > .section {
  margin: 10px 0;
}
.layout-canvas-c > .section > .columns {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
body {
  color: #000;
  font-family: Arial;
  font-size: 12px;
  margin: 0 auto;
  max-width: 1280px;
}
@media only screen and (max-width: 480px) {
  .mobile-hidden {
    display: none !important;
  }
  .responsive-td {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
  }
}
@media (min-width: 480px) {
  .layout-canvas-c > .section {
    display: table;
    table-layout: fixed;
  }
}
@media (min-width: 480px) {
  .layout-canvas-c > .section > .columns {
    display: table-cell;
    padding: 0 5px;
    vertical-align: top;
    width: 50%;
  }
  .layout-canvas-c > .section > .columns:first-child {
    padding-left: 0;
  }
  .layout-canvas-c > .section > .columns:last-child {
    padding-right: 0;
  }
  .layout-canvas-c > .section > .columns.col1 {
    *float: left;
  }
  .layout-canvas-c > .section > .columns.col2 {
    *float: right;
    *padding-right: 0;
  }
}
@media (max-width: 480px) {
  .layout-canvas-c > .section > .columns {
    width: 100%;
    margin-bottom: 10px;
  }
  .layout-canvas-c > .section > .columns:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 480px) {
  .layout-canvas-c > .section > .columns.col1 {
    width: 70%;
  }
  .layout-canvas-c > .section > .columns.col2 {
    width: 30%;
  }
}

</style>

 </head>
 <body>
  <div class="layout layout-canvas-c">
   <div class="header">
    <div data-type="slot" data-key="header" data-label="Déposer les blocs ou le contenu ici"></div>
   </div>
   <div class="section">
    <div class="columns col1">
     <form name="form1" id="form1">
		Région: 
		<select name="selectRegion" id="region" onchange="adaptDistrib()">
			<option value="">Selectionner la Region</option>
			<option value="44">Loire-Atlantique</option>
			<option value="85">Vendée</option>
		</select>
		<br><br>
		Distributeur: 
		<select name="selectDistributeur" id="distributeur">
        <option value="">Sélectionnez votre Distributeur</option>
		</select>
		<br><br>
		<input type="submit" value="Envoyer">  
	 </form>
    </div>
    <div class="columns col2">
     <div data-type="slot" data-key="col2"></div>
    </div>
   </div>
   <div class="footer">
    <div data-type="slot" data-key="footer"></div>
   </div>
  </div>
 </body>
</html>
```

Hope I was clear in my explanations, 

Thanks by advance for your help,

Regards,