Skip to Content

Bind Items from JSON to Select Box Dynamically

Aug 24, 2017 at 04:58 AM


avatar image

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Sharath M G 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.

Show 2 Share
10 |10000 characters needed characters left characters exceeded


I am now able to get data in the second select field based on the value selected in the first select field.

As soon as I select something in the first select field, the values appear in the second field, but the values present in the first field disappear. When I select a value in the second select field, it's values disappear.

What could be done to solve it?


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>")

Dennis Seah
Aug 24, 2017 at 07:27 AM

Hi Saksham

hope this help.,js,output



10 |10000 characters needed characters left characters exceeded