Drop down menu 敲除选择属性：{title Binding}未按预期为可观察数组工作

我想在鼠标悬停在特定选项上时，根据选择值显示标题（行走、跑步、交谈）

这是淘汰赛中的错误吗（或者）我做错了吗？

HTML:-

 <select data-bind="value: activityId,optionsValue: 'id', optionsText: 'name', options: activityArray,optionsCaption:'Select',attr: {title:'name'}">

---

任何帮助都是可感知的

如果您想在生成的

选项

元素上拥有附加属性，您不能使用

选项

绑定，您必须使用

foreach“手动”执行该操作

<select data-bind="value: activityId">   
    <option>Select</option>
    <!-- ko foreach: activityArray -->
    <option data-bind="value: id, text: name, attr: {title: name}"></option>
    <!-- /ko -->
</select>

然后，您可以在选择上使用此

selectedActivity

：

<select data-bind="value: activityId, attr: {title: selectedActivity}">

---

演示。

另一种解决方案可能是：

HTML:

---

对于下拉列表中的值，它工作正常。那么已经选择的值呢？当我们将鼠标移到它上面时，它不会显示选定的值。。。不管怎样，我喜欢你的答案，但它不能解决我的问题。。我正试图通过将标题绑定到一个计算的可观测对象来解决这个问题。谢谢，这正是我一直在寻找的技术。

self.selectedActivity = ko.computed(function () {        
    var selected = ko.utils.arrayFirst(self.activityArray(), function (item) {
        return item.id == self.activityId()
    });
    if (selected)      
     return selected.name;        
});

<select data-bind="value: activityId, attr: {title: selectedActivity}">

<select data-bind="options: activityArray, optionsText: 'name', 
    value: selectedActivity, attr: {title: activityTitle}, 
    optionsCaption: 'Choose...', optionsAfterRender: setOptionTitle">
</select>

self.activityTitle = ko.computed(function () {
    return self.selectedActivity() ? self.selectedActivity().name : "" ;
});