使用剔除选择后从下拉列表中设置所选值的“标题”答案

【问题标题】：Set "title" of selected value from dropdown after selection using knockout使用剔除选择后从下拉列表中设置所选值的“标题”
【发布时间】：2017-02-07 18:57:46
【问题描述】：

我正在使用带有 ASP.NET MVC 的淘汰赛 js。当用户在下拉列表中选择后将鼠标悬停在所选值上时，我想在标题上显示所选值的文本。因此，如果隐藏的更大价值可以显示在标题中。比如：如果我有三个值 One, Two , BiggerValuethathidden。

所以现在很明显，如果我的下拉列表大小不像第三个值那么大，我的第三个值将在为下拉列表定义的大小之后隐藏。所以我想在悬停时将值设置为标题时显示。

现在我尝试像这样实现下拉列表绑定：

  <select class="form-control" data-bind="options: Accounts, optionsCaption: ' -- ', optionsText: function (item) { return item.AccountName }, optionsValue: function (item) { return item.Id }, value:AccountId, click: setTitle" required="required" data-parsley-required-message="Account is required" id="ddlAccounts">

要设置这么多搜索后，我想这样做：

<div title="" id=dvAccount">
      <select class="form-control" data-bind="options: Accounts, optionsCaption: ' -- ', optionsText: function (item) { return item.AccountName }, optionsValue: function (item) { return item.Id }, value:AccountId, click: setTitle" required="required" data-parsley-required-message="Account is required" id="ddlAccounts">
</div>

基于Solution的点击事件函数：

setTip = function(c, event){
            var element = event.currentTarget;
            var qref = element.getAttribute('Qref');
            var click_id = element.id;
            return true;
        }

我哪里出错了？

请有人帮我做这个棘手的把戏！

【问题讨论】：

标签： javascript jquery knockout.js title knockout-mvc

【解决方案1】：

您可以使用“attr”绑定（“attr: { title: AccountId }” - 您可以使用另一个（人类可读的）值代替 AccountId）：

<div data-bind="attr: { title: AccountId }" id=dvAccount">
      <select class="form-control" data-bind="options: Accounts, optionsCaption: ' -- ', optionsText: function (item) { return item.AccountName }, optionsValue: function (item) { return item.Id }, value:AccountId, click: setTitle" required="required" data-parsley-required-message="Account is required" id="ddlAccounts">
</div>

【讨论】：

感谢回复我正在尝试，但 AccountId 是 ID。我想显示它的文本。
我不知道你的视图模型的结构，我写过你可以使用另一个人类可读字段的名称来代替“AccountId”...
你的意思是说我可以像设置值一样设置文本并使用该变量而不是 AccountId，对吧！
是的，您的视图模型有字段“AccountId”，该字段包含所选帐户的 ID。您需要添加另一个字段，它将返回所选帐户的可读标题。

【解决方案2】：

这是偶然的，或者我不知道，但从最后 3 个问题中，我提出了问题，我自己再次发布了我的答案。

我为下拉选择值的标题找到了一个非常有用的解决方案：

只需使用这个 jquery 和 css 组合：

$('select').each(function(){
            var tooltip = $(this).tooltip({
                selector: 'data-toggle="tooltip"',
                trigger: 'manual'
            });
            var selection = $(this).find('option:selected').text();
            tooltip.attr('title', selection)

            $('select').change(function() {
                var selection = $(this).find('option:selected').text();
                tooltip.attr('title', selection)
            });
        });

感谢 TSV 如此快速的响应并帮助我，但根据我的申请，这个更好。

【讨论】：