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 .

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 .

• javascript
• select
• knockout.js

4 Answers 4

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./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>

[Example] http://jsfiddle/cg988b4n/

It's a little smoke-and-mirror-y. But it works by not using optionsCaption. The change event removes that default options on the first change. Your logic typeId === -1 will have to change to use whatever fits with your logic.

My view model

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

ko.applyBindings(new vm());

Knockout will insert the caption option on applyBindings, but you can certainly remove it afterward without affecting your viewmodel or KO plaining. A solution like Joe's that inserts the placeholder option into the viewmodel would work, but personally I'd prefer to keep that out of my data and would instead do something like this:

vm.calRemainingTickets = function (data, event) {
    var el = event.target.options[0];
    el.value || el.remove();
    // whatever else needs doing
};

What this does is remove the first option child of the bound select element if it has a falsy option value, which your optionsCaption would. You could also check instead for text === 'Select Any Ticket type' or set a "has already removed the first element" flag.

You can restore it this way:

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);
    this.putItBack = function() {
      this.optionsCaption('Select Any');
    }
}

ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare./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>
<a href="#" data-bind="click:putItBack">Put It Back</a>