CODEWITHSUNDEEP
knockout.js
Mattl
Mattl

Reputation: 1618

Set the default select option to be the first item in the list

Using the knockout cart demo on the knockout examples page, does anyone know how to change it so that the "product" select is always defaulted to the first product in the select box?

Upvotes: 0

Views: 3050

Answers (1)

Jeff Mercado
Jeff Mercado

Reputation: 134811

When using the options binding, other bindings are also recognized. In the example provided, optionsText is a binding which determines which property of each object will be displayed as the text. The other property used in the example is the optionsCaption. This binding sets the initial text to be shown for the select box when nothing is selected.

If you want to change it so the select boxes start with a the first value in the list, just remove the optionsCaption binding. Assuming the observable bound to the value binding is not set, it will default to the first item in the array.

change this:

<select data-bind="options: sampleProductCategories,
                   optionsText: 'name',
                   optionsCaption: 'Select...',
                   value: category"></select>

to this:

<select data-bind="options: sampleProductCategories,
                   optionsText: 'name',
                   value: category"></select>

Upvotes: 7

Related Questions