JSFiddle - React, Tailwind, and code Playground

by Satyanshu Acharya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<select data-bind="options: availableMeals, optionsText: 'name', value: selectedMeal, optionsValue: 'value', event: {change: onChange}">
</select>

JavaScript

function ReservationsViewModel() {
    var self = this;
    
    self.availableMeals = ko.observableArray(
        [
         {name: "Standard (sandwich)", value: 0}, 
         {name: "Premium (lobster)", value: 34.95}, 
         {name: "Ultimate (whole zebra)",value: 290}
        ]
    );

    self.selectedMeal = ko.observable(self.availableMeals()[0]);
    
    // i want this when i change to sandwitch    
    self.onChange = function() {
        alert("for sandwitch");
    };
    
    // i want this when i change to lobster 
    self.onChange1 = function() {
        alert("for lobster");
    };
    
    //i want this when i change to ultimate
    self.onChange2 = function() {
        alert("for whole zebra");
    };
}

ko.applyBindings(new ReservationsViewModel());