Define & ldquo; title & rdquo; of the value selected from the drop-down list after selection using a knock-out

advertisements

I am using knockout js with ASP.NET MVC. I want to show the selected value's text on title when user hover on the selected value after selecting on the dropdown. So if bigger value hidden goes can show in title. like: if I have three values One, Two , BiggerValuethathidden.

So now obviously if my dropdown size is not that much bigger like third value, my third value will go hidden after size defined for dropdownlist.So I want to show when set value as title on hover.

Now I have try to implement the dropdownlist bind like this:

  <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">

To Set after so many searches , I am trying to do it like this:

<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>

click event function based on Solution:

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

Where am I going wrong?

Please some one help me to do this tricky trick!


You can use "attr" binding ("attr: { title: AccountId }" - you can put another (human-readable) value instead of 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>