JSFiddle - React, Tailwind, and code Playground

by Ghanshyam Dhabale

HTML

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

JavaScript

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