I want to open dropdown when I select value from any other dropdown specifically in iPad/iPhone.

Question

I want to open one drop down on the change event occurs on other drop down. The following code snippet is working fine for browser but it is not working on iPhone/iPad in Hybrid Application.

Your help will be appreciated.Please check Code snippet on jsfiddle

 function ViewModel(choices, choice) { this.choices = ko.observableArray(); this.choice = ko.observable(); this.changedropDown=function(data,event){ console.log("inside changedropDown"); this.bindDropDown(event); }; this.bindDropDown= function(event){ //event.stopPropagation(); console.log("insdie bindDropDown"); this.choices(choices); setTimeout(function() { showDropDown("xyz"); }, 500); }; }; var showDropDown = function (id) { console.log("inside showDropDown"); var dropdown = document.getElementById(id); var event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); dropdown.dispatchEvent(event); }; var choices = [{ id: 1, name: "one" }, { id: 2, name: "two" }, { id: 3, name: "three" }]; ko.applyBindings(new ViewModel(choices)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <select name="cars" data-bind="event:{change:function(data,event){changedropDown(data,event)}}"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <select id="xyz" data-bind="options: choices, optionsText: 'name', value: choice"></select>