Skip to Content

Bind Items from JSON to Select Box Dynamically

I want to bind data received from json to my select box based on the value selected in the previous select box. I have the below code:


sap.ui.controller("firstsapui5project.FirstView", {
onInit: function(evt) {
var oModel =  new sap.ui.model.json.JSONModel("/XMII/Illuminator?QueryTemplate=Library_management/QueryTemplates/SEL_CATEGORY_NAMES&Content-Type=text/json");
handleStaffSelect : function(oEvent)
var i1 = oEvent.getParameter("selectedItem").getKey();
var oModel2 =  new sap.ui.model.json.JSONModel("/XMII/Illuminator?Transaction=Library_management/Transactions/SEL_BOOK_NAMES&b_cat=" + i1 + "&OutputParameter=op&Content-Type=text/json");
var oGender = this.byId("selGender");
var oTemplate = new sap.ui.core.ListItem({ key : "{B_NAME}", text : "{B_NAME}"})
oGender.bindAggregation("items","/Rowsets/Rowset/0/Row", oTemplate);



<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core" xmlns="sap.m" controllerName="firstsapui5project.FirstView" xmlns:html="">
<Page title="Issue">
<Select id="selStaff" items="{/Rowsets/Rowset/0/Row}" change="handleStaffSelect">
            <core:ListItem key="{B_CATEGORY}" text="{B_CATEGORY}" />
<Select id="selGender"/>

I am successfully binding data from oModel to first select box - selStaff.

Based on what's selected in this select box (stored in variable i1), I want to get values from a URL (by passing i1 in the URL) and show them in the second select box - selGender

I Googled a bit and found some code, but unable to get anything working. Any help would be appreciated.

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

2 Answers

  • Aug 24, 2017 at 06:07 AM

    You have done most things right.

    If you are getting the data and now able to get the selected value, you just need to trigger the service.

    $.ajax("service URL"..... look up the ajax call of oData service(if you are not using the models in manifest.json.

    Add comment
    10|10000 characters needed characters exceeded

    • Avoid setting the model 2 to the view. this.getView().setModel(oModel2); - Removes old model and adds the new model

      Set the model to the control or else try to set the model to view using an ID. this.getView().setModel(oModel2,"<an ID>")

  • Aug 24, 2017 at 07:27 AM

    Hi Saksham

    hope this help.,js,output



    Add comment
    10|10000 characters needed characters exceeded