I have a cloud page set up as below. https://i.stack.imgur.com/ltqT9.png

And 2 Data Extensions as below, https://i.stack.imgur.com/2P75P.png

I need to achieve the below, 1) Both the drop down values to be pulled from respective DE. 2) The Category drop down should be populated based on the value selected in Gender drop-down.As below, If I Select MALE, it must pull ONLY Male categories from DE https://i.stack.imgur.com/WKFSZ.png

Currently I have achieved this via blend of JS and AMPscript, but is there any efficient way. I know there there is NO REST-API to pull DE rows. Also we can use a simple AMPscript LookupRows, but this will make a page refresh!

Any different approaches are welcome!

Current code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>E-commerce_KT_demo_product Details page</title>
<style type="text/css">
#Gender_div { width: 300px; height: 50px; text-align: right; left: 100px; position: relative; }
#Category_div { width: 300px; height: 50px; text-align: right; left: 100px; position: relative; }
<body style="height:auto; overflow:visible;">
<h1 style="color:maroon; text-align:center;">Product Details Page</h1>
<div id="Gender_div">
    var @Gender_rows, @Gender_row, @rowCount, @i
    set @Gender_rows = LookupRows("Gender_DE", "default", "1")
    set @rowCount = rowcount(@Gender_rows)
    if @rowCount > 0 then 
        for @i = 1 to @rowCount do
            if @i == 1 then
              output(concat('Select Gender:  ','<select name="Gender" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" ><option value="">Select</option>'))
            var @Gender
            set @Gender_row = row(@Gender_rows, @i)
            set @Gender = field(@Gender_row,"Gender")
            output(concat('<option value="', @Gender, '">', @Gender, '</option>'))
            if @i == @rowCount then
        next @i 
     output(concat("<br>companies not found"))
<div id="Category_div">
    <script language="javascript" type="text/javascript">
            function dynamicdropdown(listindex)
                document.getElementById("Category").length = 0;
                switch (listindex)
                    case "Male" :
                        document.getElementById("Category").options[0]=new Option("Male Categories","Male Categories");
                        document.getElementById("Category").options[3]=new Option("Jackets","Jackets");
                        document.getElementById("Category").options[4]=new Option("Jeans","Jeans");
                        document.getElementById("Category").options[5]=new Option("Shorts","Shorts");
                        document.getElementById("Category").options[2]=new Option("Boots","Boots");
                    case "Female" :
                        document.getElementById("Category").options[0]=new Option("Female Categories","Female Categories");
                        document.getElementById("Category").options[3]=new Option("Tops","Tops");
                        document.getElementById("Category").options[4]=new Option("Jeggings","Jeggings");
                        document.getElementById("Category").options[5]=new Option("Skirts","Skirts");
                        document.getElementById("Category").options[2]=new Option("Sandles","Sandles");
                return true;
    var @Category_rows, @Category_row, @rowCount, @i
    set @Category_rows = LookupRows("Category", "default", "1")
    set @rowCount = rowcount(@Category_rows)
    if @rowCount > 0 then 
        for @i = 1 to @rowCount do
            if @i == 1 then
              output(concat('Select Category:  ','<select id="Category" name="Category"><option value="">Select Gender first</option></select>'))
        next @i 
     output(concat("<br/>Categories not found"))

  [1]: https://i.stack.imgur.com/qFz1S.png
  [2]: https://i.stack.imgur.com/CYOh0.png
  [3]: https://i.stack.imgur.com/oYMiu.png
  [4]: https://i.stack.imgur.com/rejYR.png
  [5]: https://i.stack.imgur.com/QomHr.png

1 Answer 1


You can build a code-resource CloudPage that returns a JSON payload for your AJAX call.

Here's a server-side JavaScript example that reads state and store URL parameter values from the origin page and retrieves data up to 100 rows from a Master_Store data extension.

<script type="text/javascript" runat="server">

  Platform.Load("core", "1");
  var state = Request.GetQueryStringParameter("state");
  var store = Request.GetQueryStringParameter("store");
  var storeDE = DataExtension.Init("Master_Store");
  var locations = (state) ? storeDE.Rows.Lookup(["state"], [state], 100, "city") : storeDE.Rows.Lookup(["store"], [store], 100);
  locations = locations ? locations : "";
  Write('{"Locations":' + Stringify(locations) + '}');


There is an undocumented REST endpoint to retrieve data extension rows, but you don't need it if you just build your own code resource page.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .