Remove optionsCaption from select tag using knockout JS

Question

How to remove the optionsCaption from select tag ? using knockout JS

My select tag is like :

<select data-bind="options: categories, optionsText: 'type', optionsCaption: 'Select Any Ticket type', value: chosenCategory, disable: showReservationDetails, event: {change: calRemainingTickets}"></select>

It shows Select Any Ticket as first option. on change of the select tag i want to remove the Select Ant Ticket option.

How can we remove that required option from select tag ?

Thank you in Advance .

Answer 1

You can bind optionsCaption to an observable and set the observable's value to undefined. I've modified Joe's code to do this.

var vm = function () {
    this.optionsCaption = ko.observable('Select any');
    this.categories = ko.observableArray([ {type: 'Type 1' }, { type: 'Type 2' }]);
    this.chosenCategory = ko.observable('Select Any Ticket type');
    this.showReservationDetails = ko.observable(false);
    this.calRemainingTickets = function () {
        this.optionsCaption(undefined);
    }.bind(this);
}

ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<select data-bind="options: categories, optionsCaption: optionsCaption, optionsText: 'type', value: chosenCategory, disable: showReservationDetails, event: {change: calRemainingTickets}"></select>