CODEWITHSUNDEEP
javascriptknockout.jsknockout-2.0
suamikim
suamikim

Reputation: 5329

Show white spaces in select combobox that is filled with knockout js binding

I would like to be able to fill a HTML select element with a knockout binding. Some of the option texts include white spaces and I'd like to show them in the dropdown.

In pure HTML this can be accomplished by using   instead of simple white spaces, but that's not working with the knockout binding:

Working example

HTML:

Knockout select:
<select data-bind="options: entries" style="width: 150px"></select>
<br>
Standard select:
<select style="width: 150px">
    <option>&nbsp;&nbsp;Entry 1</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;Entry 2</option>
</select>

Javascript:

var ViewModel = function() {
    entries = ko.observableArray([
        '&nbsp;&nbsp;Entry 1',
        '&nbsp;&nbsp;&nbsp;&nbsp;Entry 2'
    ]);
};

var vm = new ViewModel();
ko.applyBindings(vm);

Hope someone can help me with this!

Thanks

Upvotes: 2

Views: 934

Answers (1)

nemesv
nemesv

Reputation: 139798

You can use a regular foreach instead of the options where you can set your html content with the html binding on your option elements:

<select data-bind="foreach: entries" style="width: 150px">
    <option data-bind="html: $data"></option>
</select>

Demo JSFiddle.

Upvotes: 2

Related Questions