我需要按它们的类别显示项目组的选择框,如下所示:
我的 C# 模型是:
public class SandboxModel
{
public SandboxModel()
{
PubCodes = new List<SelectListItem>
{
new SelectListItem { Value = 0, Text = "Agora", Type = 1 },
new SelectListItem { Value = 96, Text = "AGF - Agora Financial", Type = 2 },
new SelectListItem { Value = 81, Text = "CSP - Common Sense Publishing", Type = 2 },
new SelectListItem { Value = 136, Text = "HSI - Health Sciences Institute", Type = 2 },
new SelectListItem { Value = 0, Text = "Non-Agora", Type = 1 },
new SelectListItem { Value = 135, Text = "ANG - Angel Publishing", Type = 2 },
new SelectListItem { Value = 123, Text = "APF - Apocalypse Freedom", Type = 2 },
new SelectListItem { Value = 93, Text = "ASI - Asset Strategies International", Type = 2 },
};
}
public IList<SelectListItem> PubCodes { get; private set; }
public SelectListItem PubCode
{
get { return PubCodes.Last(); }
}
}
我的 Javascript 模型是:
<script type="text/javascript">
@{ var serializer = new JavaScriptSerializer(); }
function ViewModel () {
var self = this;
// Server Model Properties
self.SelectedPubCode = ko.observable(@Model.PubCode.Value);
// Select lists
self.PubCodes = ko.observableArray(@Html.Raw(serializer.Serialize(Model.PubCodes)));
};
};
ko.applyBindings(new ViewModel());
</script>
我的 HTML 是
<select data-bind="foreach:PubCodes, optionsCaption: 'Please Select', value:SelectedPubCode">
<!-- ko if: Type === 1 -->
<optgroup label="__________"></optgroup>
<optgroup data-bind="attr: {label: Text}"></optgroup>
<!-- /ko -->
<!-- ko if: Type !== 1 -->
<option data-bind="text: Text, value: Value"></option>
<!-- /ko -->
</select>
在除 IE 之外的所有浏览器中,我都达到了我所需要的,但在 IE 中它看起来像这样: 任何建议如何在 IE 中解决这个问题?