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.m,sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("learning");
var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", 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 mdata1 =[
{id:1,text:"sel1",},
{id:2,text:"sel2"},
{id:3,text:"sel3"}
];
var mdata2 =[
{id:1,text:"sap",},
{id:2,text:"scn"},
{id:3,text:"community"}
];
var oModel1 = new sap.ui.model.json.JSONModel();
oModel1.setData(mdata1);
sap.ui.getCore().setModel(oModel1,"oModel1");
var oComboBox1 = new sap.ui.commons.ComboBox("combo1",{
// even if you replace with sap.m.ComboBox it works fine
items:{
path:"oModel1>/",
template: new sap.ui.core.ListItem({
key:"{oModel1>id}",
text:"{oModel1>text}"
}),
}
});
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData(mdata2);
sap.ui.getCore().setModel(oModel2,"oModel2");
var oComboBox2 = new sap.ui.commons.ComboBox("combo2",{
// even if you replace with sap.m.ComboBox it works fine
items:{
path:"oModel2>/",
template:new sap.ui.core.ListItem({
key:"{oModel2>id}",
text:"{oModel2>text}"
}),
},
});
var oComboBox1 = new sap.ui.layout.VerticalLayout({
content:[oComboBox1,oComboBox2],
});
oComboBox1.placeAt("content");