Countries Dropdown

by Jakub Jedryszek

HTML

<select data-bind="options: options, optionsText: 'text', optionsValue: 'offset', value: selectedOptionId"></select>

<br/>
<br/>
Selection Option Object : <span data-bind="text: selectedOption"></span><br/>
Selection Option text : <span data-bind="text: selectedOption().text"></span><br/>
Selection Option offset : <span data-bind="text: selectedOption().offset"></span><br/>

JavaScript

var optionModel = function(id,name){
    var self = this;
    self.id = id;
    self.name = name;
}

var viewModel = function(){
    var self = this;
    self.options = [
                {
                    value: "Dateline Standard Time",
                    abbr: "DST",
                    offset: -12,
                    isdst: false,
                    text: "(UTC-12:00) International Date Line West"
                },
                {
                    value: "UTC-11",
                    abbr: "U",
                    offset: -11,
                    isdst: false,
                    text: "(UTC-11:00) Coordinated Universal Time-11"
                },
                {
                    value: "Hawaiian Standard Time",
                    abbr: "HST",
                    offset: -10,
                    isdst: false,
                    text: "(UTC-10:00) Hawaii"
                },
                {
                    value: "Alaskan Standard Time",
                    abbr: "AKDT",
                    offset: -8,
                    isdst: true,
                    text: "(UTC-09:00) Alaska"
                },
                {
                    value: "Pacific Standard Time (Mexico)",
                    abbr: "PDT",
                    offset: -7,
                    isdst: true,
                    text: "(UTC-08:00) Baja California"
                },
                {
                    value: "Pacific Standard Time",
                    abbr: "PDT",
                    offset: -7,
                    isdst: true,
                    text: "(UTC-08:00) Pacific Time (US & Canada)"
                },
                {
                    value: "US Mountain Standard Time",
                    abbr: "UMST",
                    offset: -7,
                    isdst: false,
                    text: "(UTC-07:00) Arizona"
                },
                {
                    value: "Mountain Standard Time (Mexico)",
                    abbr:...