JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>


		<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons"
				data-sap-ui-theme="sap_goldreflection">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("dropdown");
				var view = sap.ui.view({id:"idsample1", viewName:"dropdown.sample", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

JavaScript

var i = 0;
		var oModel = new sap.ui.model.json.JSONModel();
		var data = [{name : "SAP"},
		            {name : "SCN"}
		         ];
		var data1 = [ {
		            	 city : ""},
		            	 {
		            	 city : "",
		             }];
		var oModel1 = new sap.ui.model.json.JSONModel();
		oModel1.setData(data1,"cityjson");
		
		oModel.setData(data);
		var drop = new sap.ui.commons.DropdownBox({
			
			change : function(e)
			{
				if(i<2)
					{
				data1[i].city = drop.getValue();
				oModel1.setData(data1);
				alert( drop.getValue() + " added to city property of other model, see console")
				console.log(oModel1.getData());
				i++
					}
				else
					{
					
					alert("cannot add to other model")
					}
				
			}
			
			
		});
		
		drop.setModel(oModel);

		var oItemTemplate1 = new sap.ui.core.ListItem();
		oItemTemplate1.bindProperty("text", "name");
		drop.bindItems("/", oItemTemplate1);
		
		drop.placeAt("content");