JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<select data-bind="options: state, optionsValue: 'id' ,optionsText: 'name', value: stateId, optionsCaption: 'Choose...'"></select>

<select data-bind="options: SelectedCityList, optionsValue: 'cityid' ,optionsText: 'name', value: cityId, optionsCaption: 'Choose...'"></select>

<table>
    <thead>
        <tr><th>First</th><th>Last</th></tr>
    </thead>
    <tbody data-bind="foreach: List">
        <tr>
            <td><select data-bind="options: stateList, optionsValue: 'id' ,optionsText: 'name', value: stateId, optionsCaption: 'Choose...'"></select></td>
            <td ><select data-bind="options: cityList, optionsValue: 'cityid' ,optionsText: 'name', value: cityId, optionsCaption: 'Choose...'"></select></td>
        </tr>
    </tbody>
</table>

JavaScript

states=[{id:1,name:"MP"},
     {id:2,name:"UP"},
      {id:3,name:"MH"},
      {id:4,name:"AP"},
      {id:5,name:"KP"}
      
     ];

city=[{cityid:1,name:"Indore"},
     {cityid:1,name:"Gwalior"},
      {cityid:1,name:"Bhopal"},
      {cityid:2,name:"Jhansi"},
     {cityid:2,name:"Kanpur"},
      {cityid:2,name:"Merut"},
      {cityid:3,name:"Pune"},
     {cityid:3,name:"Mumbai"},
      {cityid:4,name:"Hyderbad"},
      {cityid:5,name:"Banglore"},
     {cityid:5,name:"Mysore"}
      
     ];

viewModel=function(states, city){
    self=this;
    
    self.state=ko.observableArray(states);
    self.stateId=ko.observable();
    
    self.cityId=ko.observable();
    self.cityList=ko.observableArray(city);
    self.SelectedCityList=ko.dependentObservable(function(){
        var state=self.stateId();
        var arr=[];
        if(state){
            ko.utils.arrayForEach(self.cityList(),function(item){
                if(item.cityid===state){
                 arr.push(item);
                }
            });
        
        }
    return arr;
    });
    
    self.List=ko.observableArray([{stateList:self.state(),cityList:self.SelectedCityList()
                                   ,stateId:self.stateId(),cityId:self.cityId()},
                            {stateList:self.state(),cityList:self.SelectedCityList()
                             ,stateId:self.stateId(),cityId:self.cityId()}
                            ]);

}
ko.applyBindings(new viewModel(states, city));