我是淘汰赛和MVC的新手。 我试图将knockout observable数组绑定到dropdownlist。这是我正在使用的代码。
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>
其他绑定似乎工作正常,但下拉列表没有填充。新的,所以任何指导都将不胜感激。
答案 0 :(得分: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>