How can I get the value in the selected using knockout?

Question

So, I'm getting some problems of how to get the value of the selected option in data-bind with foreach, for example, in the second one select that I have in the code html. How can I get the value of the selected option at the moment?

I tried to follow an example that I had, but I'm failing to make it happen in this one. In resume, what is the command to get the value of the selected option.

 **HTML**
        <select id="corridas" data-bind="value: selectRace, foreach : races," aria-  label="CORRIDAS">
            <option data-bind="text: Name" ></option>
        </select>
        <select id="nacionalidade" data-bind="value: selectNationality, foreach : nationalities" aria-label="NACIONALIDADES">
            <option data-bind="text:Name"></option>
        </select>
        

JS:

var vm = function () {
        console.log('ViewModel initiated...');
        //---Variáveis locais
        var self = this;
        self.baseUri = ko.observable('http://192.168.160.58/Formula1/api/drivers');
        self.baseUri1 = ko.observable('http://192.168.160.58/Formula1/api/Nationalities');
        self.baseUri2 = ko.observable('http://192.168.160.58/Formula1/api/Races');
        //Variaveis para drivers
        self.error = ko.observable('');
        self.passingMessage = ko.observable('');
        self.records = ko.observableArray([]);
        self.currentPage = ko.observable(1);
        self.pagesize = ko.observable(10);
        self.totalRecords = ko.observable(50);
        self.hasPrevious = ko.observable(false);
        self.hasNext = ko.observable(false);

        //Variaveis para nacionalidades
        self.selectNationality = ko.observable(null);
        self.nationalities = ko.observableArray([]);
        console.log("Here")
        console.log(self.selectNationality)
      

        // Funçao para obter a List onde irei buscar toda a informaçao das Nationalities
        self.AllNationalities = function () {
            console.log('CALL: Get NATIONALITIES ...');
            var composedUri1 = self.baseUri1()
            ajaxHelper(composedUri1, 'GET').done(function (data) {
                console.log(self.selectNationality)
                self.nationalities(data.List);
            });
        };


        //Variaveis para corridas
        self.selectRace = ko.observable(null);
        self.races = ko.observableArray([]);

        //Funcao para obter a List onde irei buscar toda a informaçao das Races
        self.AllRaces = function () {
            console.log('CALL: GET RACES...');
            var composedUri2 = self.baseUri2()
            ajaxHelper(composedUri2, 'GET').done(function (data) {
                self.races(data.List);
            });
        }

        

        //Paginação
        self.previousPage = ko.computed(function () {
            return self.currentPage() * 1 - 1;
        }, self);
        self.nextPage = ko.computed(function () {
            return self.currentPage() * 1 + 1;
        }, self);
        self.fromRecord = ko.computed(function () {
            return self.previousPage() * self.pagesize() + 1;
        }, self);
        self.toRecord = ko.computed(function () {
            return Math.min(self.currentPage() * self.pagesize(), self.totalRecords());
        }, self);
        self.totalPages = ko.observable(0);
        self.pageArray = function () {
            var list = [];
            var size = Math.min(self.totalPages(), 9);
            var step;
            if (size < 9 || self.currentPage() === 1)
                step = 0;
            else if (self.currentPage() >= self.totalPages() - 4)
                step = self.totalPages() - 9;
            else
                step = Math.max(self.currentPage() - 5, 0);

            for (var i = 1; i <= size; i++)
                list.push(i + step);
            return list;
        };
        //Colocar a informaçao a funcionar
        self.activate = function (id) {
            console.log('CALL: getDrivers...');
            console.log(self.pagesize)
            var composedUri = self.baseUri() + "?page=" + id + "&pageSize=" + self.pagesize();
            ajaxHelper(composedUri, 'GET').done(function (data) {
                console.log(data);
                self.records(data.List);
                console.log(self.records);
                self.currentPage(data.CurrentPage);
                self.hasNext(data.HasNext);
                self.hasPrevious(data.HasPrevious);
                self.pagesize(data.PageSize)
                self.totalPages(data.PageCount);
                self.totalRecords(data.Total);
            });
        };
        //--- Internal functions
        function ajaxHelper(uri, method, data) {
            self.error(''); // Clear error message
            return $.ajax({
                type: method,
                url: uri,
                dataType: 'json',
                contentType: 'application/json',
                data: data ? JSON.stringify(data) : null,
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("AJAX Call[" + uri + "] Fail...");
                    self.error(errorThrown);
                }
            });
        }

        function getUrlParameter(sParam) {
            var sPageURL = window.location.search.substring(1),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;
            console.log("sPageURL=", sPageURL);
            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');

                if (sParameterName[0] === sParam) {
                    return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
                }
            }

        };

        //--- start ....
        var pg = getUrlParameter('page');
        console.log(pg);
        if (pg == undefined)
            self.activate(1);
        else {
            self.activate(pg);
        }

        self.selectNationality.subscribe(self.AllNationalities);
        self.selectNationality.subscribe(self.AllRaces);
    };
   
    $(document).ready(function () {
        console.log("ready!");
        ko.applyBindings(new vm());


       
    });
    

Answer 1

You should consider using the 'options' binding: https://knockoutjs.com/documentation/options-binding.html