使用 knockout 绑定下拉列表

Question

我是淘汰赛和 MVC 的新手。我正在尝试将敲除可观察数组绑定到 dropdownlist.Here 是我正在使用的代码。

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);

正在尝试绑定认证字段。

我的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，所以任何指导将不胜感激。

Answer 1

您的模型需要有 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>

使用 knockout 绑定下拉列表

Binding a dropdownList using knockout

javascript

asp.net

knockout.js