JSFiddle - React, Tailwind, and code Playground

by rayabu1234

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.min.js "></script>
<select data-bind="options: Addresses, optionsText: 'Address', optionsValue: 'CountryCode'"></select>

<select data-bind="options: countriesArray , optionsText: 'name', optionsvalue: 'CountryCode', value: selectedCountry"></select>

JavaScript

function ViewModel(Array, countriesArray) {
   this.Addresses = ko.observableArray(Array);
   this.SelectedAddress = ko.observableArray();
   this.countriesArray = ko.observable(countriesArray); 
    this.selectedCountry = ko.observable();
   
        this.SelectedAddress.subscribe(function(value){
            var country = countriesArray.where(function(item) { 
                            item.CountryCode === value; 
                           });
           this.selectedCountry(country);
        });
};

var AddressArray = [
    { id: 1, Address: "12 ball road", CountryCode: "GB" },
        { id: 2, Address: "12 kent road", CountryCode: "PK" },
        { id: 3, Address: "11 withy close", CountryCode: "DL" }
    ];

var countriesArray = [
        { CountryCode: "GB", name: "UK" },
        { CountryCode: "PK", name: "Pakistan" },
        { CountryCode: "DL", name: "Denmark" }
    ];


var model = new ViewModel(AddressArray, countriesArray);
model.selectedCountry(countriesArray[2]);

ko.applyBindings(model);