如何在数据绑定选择选项中添加标题

【问题标题】：How to add title in data-bind select option如何在数据绑定选择选项中添加标题
【发布时间】：2018-05-24 02:00:08
【问题描述】：

我一直在研究如何在选项属性中添加标题，因为我的选择标签是数据绑定的以动态生成选项内容

                            <select class="form-control test" style="height:220px;" multiple="multiple" data-bind="options: $parent.InitiatorFields, optionsText: 'FieldDescription', optionsValue: 'FieldCode', selectedOptions: $root.selectedFromListRule "></select>

我想发生这样的事情

<select class="form-control test" style="height:220px;" multiple="multiple" data-bind="options: $parent.InitiatorFields, optionsText: 'FieldDescription', optionsValue: 'FieldCode', selectedOptions: $root.selectedFromListRule ">
<option data-bind="attr {title: 'FieldDescription'}"></option>

这可能吗？

【问题讨论】：

标签： html knockout.js data-binding

【解决方案1】：

您可以使用optionsAfterRender 已记录在案的here。

如果您需要在生成的选项元素上运行一些进一步的自定义逻辑，您可以使用 optionsAfterRender 回调。每次将选项元素插入列表时都会调用回调函数，参数如下：

所以你想要的样本是：

var VM = function(){
  this.options = ko.observableArray(["Option 1", "Option 2", "Option 3"]);
  this.selectedOptions = ko.observableArray(["Option 2"]);
  this.setTitle = function(option, item){
    ko.applyBindingsToNode(option, {attr: {title: "FieldDescription"}});
    // option.title = "FieldDescription"; // Or this line directly
  }
}

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select multiple="true" data-bind="options: options, selectedOptions: selectedOptions, optionsAfterRender: setTitle">

【讨论】：