input controls as select box

by srikar7

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Visualize: Get input controls data  (5.6)
  -->

<!--Provide URL to visualize.js-->
<script type='text/javascript' src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>


<div>
  <select id="sel"></select>
  <div id="container"></div>
</div>

CSS

#container {
  width: 500px;
  height: 500px;
}

#sel {
  width: 150px;
  height: 20px;
}

JavaScript

var reportUri = "/public/Samples/Reports/ProfitDetailReport";

visualize({
    auth: {
      name: "superuser",
      password: "superuser"
    }
  },
  function(v) {
    v.inputControls({
      resource: reportUri,
      success: renderInputControls
    });
    var report = v.report({
      resource: reportUri,
      container: "#container"
    });

    $("#sel").on("change", function() {
      report.params({
        "ProductFamily": [$(this).val()]
      }).run();
    });
  })


function renderInputControls(control) {
  var x;
  var temp = '';
  var cc = control.parameters.ProductFamily;
  for (x = 0; x < cc.length; x++) {
    temp = cc[x];
    //var option = document.createElement("option");
    //option.setAttribute("value", temp);
    $('#sel').append("<option value=" + temp + ">" + temp + "</option>");
    console.log(temp);
  }

  console.log(typeof cc);

}