1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function get_regions(zone){			
    $('select#country').selectmenu({
        select: function(event, options) {
            $.ajax({
            type: "GET",
            url: 'zone?iana_root_zone=' + zone,
            // this returns an array [{"name": "east-anglia", "value": "East Anglia"}, ...}
            success: function(value) {
            // add the returned HTML (the new select)
                $("#regions").html(value).find("select").selectmenu();

                }
            });
        }

         }); //end ajax call

}

here is the html

        <fieldset>
            <select id="country" name="country" 
                onchange="javascript: get_regions(this.value)">
                <option stl:repeat="option options" value="${option/name}">
                ${option/value}
                </option>
            </select>
        </fieldset>
        <div id="regions"></div>