Привязка выпадающего списка с использованием нокаута

Я новичок в нокауте и MVC. Я пытаюсь связать наблюдаемый массив нокаутом с выпадающим списком. Вот код, который я использую.Привязка выпадающего списка с использованием нокаута

JS код

 var Provider = 
      { 
       ProviderID: ko.observable(""), 
       FirstName: ko.observable(""), 
       LastName: ko.observable(""), 
       Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N"]), 
       Specialization: ko.observable(""), 
       TaxonomyCode:ko.observable(""), 
       SSN: ko.observable(""), 
       ContactNumber: ko.observable(""), 
       ContactEmail: ko.observable(""), 
       FacilityName: ko.observable(""), 
      } 
      ko.applyBindings(Provider);

Am пытается связать поле сертификации.

Мой HTML код выглядит следующим образом

<head> 
    <title>CREATE PROVIDER</title> 
</head> 
<body> 
<div class="container">  
    <h1 class="col-sm-offset-2">Enter Provider Details:</h1><br /> 
    <form class="form-horizontal" role="form" id="ProviderDetailsForm"> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">FIRST NAME:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value: FirstName" onkeypress="return onlyAlphabets(event);"> 
      </div> 
      <label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label> 
     </div> 

     <div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">CERTIFICATION:</label> 
      <div class="col-sm-6"> 
       <select class="form-control" id="Certification" data-bind="value: Certification, optionsCaption: 'Select a Certification'"> 
       </select> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label> 
      <div class="col-sm-6"> 
       <select class="form-control" id="Specialization" data-bind="value: Specialization"> 
        <option>Select a Specialization</option>  
        <option>Doctor</option> 
        <option>Facility</option> 
       </select> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">TAXONOMY CODE:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control" placeholder="Taxonomy code" id="TaxonomyCode" data-bind="value: TaxonomyCode" disabled="disabled"> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">SSN:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control" placeholder="Enter the SSN" id="SSN" data-bind="value: SSN" onkeypress="return onlyNumbers(event);" maxlength="9"> 
      </div> 
      <label class="col-sm-4 labelfont errorMsg" id="Err_SSN">Enter the SSN</label> 
     </div> 

     <div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">FACILITY NAME:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control" data-bind="value: FacilityName" placeholder="Enter the Facility Name" id="FacilityName"> 
      </div> 
      <label class="col-sm-4 labelfont errorMsg" id="Err_FacName">Enter the Facility name</label> 
     </div> 

     <div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control" data-bind="value: ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" onkeypress="return onlyNumbers(event);" maxlength="10"> 
      </div> 
      <label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label> 
     </div> 

     <div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">EMAIL ADDRESS:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control" data-bind="value: ContactEmail" placeholder="Enter your email address" id="EmailAddress"> 
      </div> 
      <label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label> 
     </div> 

     <div class="form-group"> 
      <button type="submit" id="Submit" class="btn btn-primary col-sm-1 col-sm-offset-4">Submit</button> 
      <button type="reset" class="btn btn-primary col-sm-1">Reset</button> 
     </div> 
    </form> 
</div> 
<script type="text/javascript" src="../../Scripts/Create_Script.js"></script>

, кажется, работает нормально Другие привязок, но выпадающий список не получает populated.New к этому, поэтому любые рекомендации будут оценены.

источник

2015-01-17 A NewBie

В вашей модели должно быть 2 свойства для сертификации: один для хранения списка доступных значений и один для хранения выбранного значения. Например:

Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N"]), 
SelectedCertification: ko.observable(""),

Тогда для select элемента можно использовать связывание следующим образом:

<select data-bind="options: Certification, 
        value: SelectedCertification, 
        optionsCaption: 'Choose a certification...'"> 
</select>

источник

2015-01-17 11:53:01 dotnetom

Спасибо большое @dotnetom –

в качестве катамнестического, если вы не возражаете, Вы можете направлять меня, как я будет заполнять второй раскрывающийся список, т.е. Специализация основана на значениях Сертификации. –

Привязка выпадающего списка с использованием нокаута

ответ

Смежные вопросы