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

Share Improve this question Follow edited Nov 9, 2015 at 19:25 pnuts 59.6k1111 gold badges9191 silver badges141141 bronze badges asked Sep 8, 2015 at 12:58 Nimmagadda GowthamNimmagadda Gowtham 27055 silver badges1919 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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>