knockout.js - KnockoutJs SELECT tag is Undefined -

i having issue dropdownlist part of model not binding correctly. not sure doing wrong. have simplified sample binding fine. in complete version, dropdownlist says "undefined".

the model "employee" , has set of associated models of "contacts". relevant bits this:

var employeeviewmodel = function() {     var self = this;     self.typesofcontact = ko.observablearray(['phone number', 'website', 'messaging', 'address', 'email address']);      self.contactdetails = ko.observablearray();     self.contactdetails().push(new contactdetail(self.typesofcontact()[0], 'home phone', '', '', '', '', '', '', ''));      /* snip bunch of other properties */  }; 

the relevant bits of contactdetail this:

var contactdetail = function(contacttype, addresstype, contactfield, address1, address2, address3, city, state, postalcode) {     var self = this;     self.contacttype = ko.observable(contacttype);     /* snip bunch of other properties */ }; 

the relevant bit of html looks this:

        <div class='row' data-bind="foreach: contactdetails">             <div class='small-3 columns '>                 <label>                     contact type                     <select id="contacttypeselect" data-bind='options: $root.typesofcontact'>                     </select>                  </label>             </div>             <div class='small-9 columns '>              </div>         </div> 

other properties bind fine.

if this:

ko.applybindings(new employeeviewmodel()); 

and this:

var x = ko.contextfor(document.getelementbyid("contacttypeselect")); 

then x.$root.typesofcontact() array[6] items expect see. , x.$data.contacttype() "phone number".

however displayed html drop down box says "undefined" , rendered html looks this:

        <div class="small-3 columns ">             <label>                 contact type                     <select id="contacttypeselect" data-bind="options: $root.typesofcontact" class="hidden-field" data-id="1375296525390-hq3u3">                         <option value="phone number">phone number</option>                         <option value="website">website</option>                         <option value="messaging">messaging</option>                         <option value="address">address</option>                         <option value="email address">email address</option>                         <option value="phone number">phone number</option>                     </select><div class="custom dropdown" data-id="1375296525390-hq3u3"><a href="#" class="current">undefined</a><a href="#"                         class="selector"></a><ul></ul>                     </div>              </label>         </div> 

if change original markup this:

<select id="contacttypeselect" data-bind='options: $root.typesofcontact, value:contacttype'></select> 

there no difference. still says undefined.

what missing?

thanks nemesv, answer add "no-custom" class select element:

<select class="no-custom" id="contacttypeselect" data-bind='options: $root.typesofcontact, value:contacttype'></select> 

adding zurb foundation tag post.