KnockoutJS and binding CSV to a Dropdown using CustomBinding

I ran into this small issue when I was asked to convert a text field into a Single Select Dropdown. As we were doing this for a demo, I thought I will try this little hack to avoid adding a table in database and whole nine yards.

I am not sure how useful this is going to be to someone but I am hoping that.. someday.. someone will benefit from this.

PS: Due to certain restrictions the following code snippet is missing appropriate closing script() tags. Kindly add them if you copy the code to use it somewhere.

// This event handler will take care of updating the Selected Value self.UpdateSelectedValue = function (data, event) { if ($( { data.SelectedValue($(; } };

self.ShowData = function () { alert(self.SelectedValue()); }; };

// This custom handler does the real work ko.bindingHandlers.customSelect = { // Init handles the first time load and // once the options are added to Select, set the Selected option init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { var value = ko.unwrap(valueAccessor()); var options = value.split(","); $.each(options, function (index, text) { $(element).append($("

$(document).ready(function () { ko.applyBindings(new selectViewModel()); });