Edit in JSFiddle

// Visualize: Use links as data  (5.6)

// NOTE: This Fiddle is using a non-standard demo report source:
//       (/public/viz/Hyperlinks/Drill_Reports_with_Controls/main_report).

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
    
    var $select = $("#selectCity"),
        report = v.report({
            resource: "/public/viz/Hyperlinks/Drill_Reports_with_Controls/main_report",  
            container: "#main",
            success: refreshSelect,
            error: showError
    });

    function refreshSelect(data){
        console.log(data);
        var options = data.links.reduce(function(memo, link){
                console.log(link);
                return memo + "<option>"+link.tooltip+"</option>";
            },"");
        $select.html(options);
    }
   
    $("#previousPage").click(function() {
        var currentPage = report.pages() || 1;
        goToPage(--currentPage);     
    });
    
    $("#nextPage").click(function() {
        var currentPage = report.pages() || 1;
        goToPage(++currentPage);
    });
    
    function goToPage(numder){ 
        report
            .pages(numder)
            .run()
                .done(refreshSelect)
                .fail(showError);
    }   
    
    function showError(err){
        alert(err.message);
    }
    
});

<!-- Visualize: Use links as data  (5.6)
  -->
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>

<select id="selectCity"></select>
<button id="previousPage">Previous Page</button>
<button id="nextPage">Next Page</button>
<div>
    <div style="width:20px;"></div>
    <div style="width:500px;" id="main"></div>  
</div>

#main{
   float: left; 
}

#drill-down{
    float: right; 
}