Magento 2 knockout js onchange selected value not working

Question

I'm working on checkout page. I cannot get the selected value from the event.

My Html

<select name="addresslist" id="addresslist" data-bind="event:{ change: regionChange}">
             <option>France</option>
             <option>Germany</option>
</select>

My JS

regionChange:function (data, event) {                     
            console.log(event,"jj")
        }

I'm seeing the event console but can't get the selected value also the selected index is not updating for options when on change even occurs

Answer 1

try this code

    <select name="addresslist" id="addresslist" data-bind="value: selectedRegion, event: { change: regionChange}">
        <option value="France">France</option>
        <option value="Germany">Germany</option>
    </select>

And in your JavaScript:

 define([
    'ko',
    'uiComponent',
], function (ko, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Your_Module/your_template',
        },
        selectedRegion: ko.observable(''),

        initialize: function () {
            this._super();
            // Additional initialization logic if needed
        },

        regionChange: function (data, event) {
            console.log(this.selectedRegion());
        },
    });
});

Answer 2

Replace your Select Field with This Code

<select name="addresslist" id="addresslist" data-bind="value: regionChange">
             <option>France</option>
             <option>Germany</option>
</select>

Then in js try this code.

this.regionChange = ko.observable();

Answer 3

Please try this

My Html
<select data-bind=""options: availableOptions,
                       value: myfield,
                       optionsCaption: 'Select an element'"">
</select>


My JS
var ViewModel = function() {
    var self = this;
    self.availableOptions = ['France', 'Germany'];
    self.myfield = ko.observable();

    self.myfield.subscribe(function(newValue) {
        // Handle a change here, e.g. update something on the server with Ajax.
        alert('myfield changed to ' + newValue);
    });
}

ko.applyBindings(new ViewModel());