Develop Reference

Set "title" of selected value from dropdown after selection using knockout

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>

Uffffff it is accidently or I don't know but from last 3 questions I asked question and me myself post my answer, this time again.
I found an extreme helpful solution for title of dropdown selected value:
Just use this jquery and css combination:
$('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)
});
});
Thanks to TSV for such faster response and help me but this one is better as per my application.

using valid field breaks input box; knockoutJS

from http://learn.knockoutjs.com/#/?tutorial=collections
Changing
<td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
to
<td><select data-bind="options: $root.availableMeals, value: name, optionsText: 'mealName'"></select></td>
causes the input box to break. When broken, the surcharge doesn't update when you change the meal, and the default meal name doesn't match the price (always first meal, sometimes second price)
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
}
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
var self = this;
// Non-editable catalog data - would come from the server
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 0 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];
// Editable data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[1]),
new SeatReservation("Bert", self.availableMeals[0])
]);
// Operations
self.addSeat = function() {
self.seats.push(new SeatReservation("", self.availableMeals[0]));
}
}
ko.applyBindings(new ReservationsViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Your seat reservations</h2>
<table>
<thead><tr>
<th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
</tr></thead>
<!-- Todo: Generate table body -->
<tbody data-bind="foreach: seats">
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.availableMeals, value: name, optionsText: 'mealName'"></select></td>
<td data-bind="text: meal().price"></td>
</tr>
</tbody>
</table>
<button data-bind="click: addSeat">Reserve another seat</button>
name is a valid field in the SeatReservation, and this for loop is iterating over seat reservations. Why doesn't it just show the person's name, why does it go to the default meal value? Thank you

The first problem, as mentioned above, is that you are trying to assign the value from the dropdown into the name field (this is the portion that is written value: name).
If you wanted to show something different within the dropdown field, you would need to modify the optionsText property, similar to this:
<td><select data-bind="options: $root.availableMeals, value: name, optionsText: 'desiredPropertyNameGoesHere'"></select></td>
This is because the text that is rendered in the dropdown is pulled into the select by the optionsText property. The value binding assigns a value to an observable. The text binding displays a value from an observable. I think what may be happening is that you are confusing the behavior of the text and value bindings. When I first started, I made that mistake as well.
You can see that if you look at your <input> element, which is using the value accessor to pull the reservation's owner name into the field.
<td><input data-bind="value: name"></input></td>
If you were to do this with a different HTML element, such as <span>, you would need to use the following binding setup instead:
<td><span data-bind="text: name"></span></td>
See My Sample to show the difference in the example you have been working on.
I hope that helps to clarify a little of what is going on with the example.

meal is an observable, and value binding requires an observable to put the selected value in it, otherwise, nothing changes after selecting different values

Break down the bindings in the <select>:
options takes an array to populate the drop down
optionsText lets you specify a property of an item to display as the text
value is where you save a selected value

knockout multiselect selectedOptions contains values instead of objects

I have a select with the attribute multiple. For each option in the select I want the title attribute set (which shows a tooltip). I also want to retrieve the selected options as an array of objects. I managed to get what I want except for the fact that the selected options doesnt return an array of objects but an array of valueTexts. I can't figure out how I get objects in that array.
This is the code I got so far:
HTML:
<select multiple style="width: 150px;" size=15
data-bind="foreach: options, selectedOptions: selectedOptions">
<option data-bind="text: Name, attr: { 'title': Name}"></option>
</select><br />
<button data-bind="click: showSelectedOptions">Show selection</button>
Javascript:
function Option(id, name){
var self = this;
self.Id = id;
self.Name = name;
}
function ViewModel(){
var self = this;
self.options = ko.observableArray([
new Option(0, "NormalText"),
new Option(1, "AnotherText"),
new Option(2, "WaaaaaaaaaaaaaaaayTooLongText")
]);
self.selectedOptions = ko.observableArray([]);
self.showSelectedOptions = function(){
alert(self.selectedOptions());
//what I would like to have:
//if (self.selectedOptions().length > 0)
// alert(self.selectedOptions()[0].Name);
}
}
ko.applyBindings(new ViewModel());
And the fiddle link for demonstration: http://jsfiddle.net/c63Bb/1/
What do I need to add or change so the array selectedOptions contains objects instead of strings?

Try your html like this
<select
data-bind="
options: options,
selectedOptions : selectedOptions,
optionsText: 'Name',
optionsCaption: 'Choose...'
"
size="5" multiple="true"></select>
Demo
See the console for output
EDITS :
To add attributes to option you need to use optionsAfterRender.
This is available only in version 3.1.0. I noticed your fiddle is using 3.0.0.
<select
data-bind="
options: options,
selectedOptions : selectedOptions,
optionsText: 'Name',
optionsAfterRender: $root.setTitle
"
size="5" multiple="true"></select><br />
<button data-bind="click: showSelectedOptions">Show selection</button>
And create a fnction
self.setTitle = function(option, item) {
option.title = item.Name
}
Demo
Reference
See Note 2

Similar to #MuhammadRaheel, I used optionsAfterRender:
<select data-bind="optionsAfterRender: myFunc, ...">
But I needed to use ko.applyBindingsToNode:
var self.myFunc = function(option, item) {
ko.applyBindingsToNode(option, { attr: { title: 'Tooltip!' } }, item);
}

Use options and optionsText bindings instead of foreach:
<select multiple style="width: 150px;" size=15
data-bind="options: options, optionsText: 'Name', selectedOptions: selectedOptions">
<option data-bind="text: Name, attr: { 'title': Name}"></option>
</select>
Here is demo: http://jsfiddle.net/p5E8y/

dropdown knockoutjs with value from server

I am working on a drop down menu within a TR .. I have true, false or none as the value that I receive from server and I want that to change the drop down option as in example below.
The first one is working but I want the second one to function as the first one
Example is here: http://jsfiddle.net/3xLgJ/
This is my HTML:
<div data-bind='text: incomingValue'></div>
<select data-bind="value: incomingValue">
<option value="true">Yes</option>
<option value="false">No</option>
<option value="none">Don't Know</option>
</select>
How can I implment this as above as this is within a tr and to function as above
<select data-bind='options: yesno, value: incomingValue'/>
Here is my knockout
var myModelView = function () {
self = this;
self.yesno = ko.observableArray(['Yes', 'No', 'Don\'t know']);
self.incomingValue = ko.observable('none');
};
var moView = new myModelView();
ko.applyBindings(moView);
Thanks
Thanks

The best solution is probably to slightly reconstruct the view model to use objects instead of simple strings:
// Create a "class" that represents an option
var Option = function(id, caption) {
this.id = id;
this.caption = caption;
};
Now you populate the observable array with objects constructed from this function:
self.yesno = ko.observableArray([
new Option('true', 'Yes'),
new Option('false', 'No'),
new Option('none', 'Don\'t know')
]);
You can use the "optionsText" binding to correctly bind these objects to the markup:
<select data-bind="options: yesno,
optionsText: 'caption',
value: selectedItem"></select>
If you receive a string "none" from the server, you need to find the object representing this option:
var incomingValue = 'none';
// Find the first object that is a match in the observable array "yesno"
var incomingItem = ko.utils.arrayFirst(self.yesno(), function(item) {
return item.id == incomingValue;
});
self.selectedItem = ko.observable(incomingItem);
When displaying the selection somewhere else you'll need to consider that the selection is represented by an object:
<div data-bind='text: selectedItem().caption'></div>
Demo: http://jsfiddle.net/3xLgJ/2/

You need to use the optionsText and optionsValue bindings. You'll need to make an observable array of values and text:
self.yesno = ko.observableArray([
{value:"true",text:"Yes"},
{value:"false",text:"No"},
{value:"none",text:"Don't Know"}]);
then, you need to do something like this in your html:
<select data-bind="options: yesno2, optionsText: 'text',optionsValue: 'value', value: incomingValue"></select>
See here for a working example

knockout.js - setting an empty selection

I'm trying to use knockout.js to populate and manage a <select/> box. I'd like the initial value to be empty.
However, I'm having trouble trying to force the managed value to be null at any time, let alone initially.
For example, consider this fiddle:
HTML:
<select data-bind="options: myOptions, value: myValue"></select> aka
<span data-bind="text: myValue"></span>
<div>
<button data-bind="click: setMyValue(null)">clear the selection</button>
<button data-bind="click: setMyValue('one')">select "one"</button>
<button data-bind="click: setMyValue('four')">select "four"</button>
</div>
<ul data-bind="foreach: log">
<li>message: <span data-bind="text: message"></span></li>
</ul>
JS:
function Model() {
var self = this;
self.myOptions = ['one', 'two', 'three', 'four'];
self.myValue = ko.observable();
self.setMyValue = function (val) {
return function(){
this.log.push({
message: "ok, trying to set value as " + val
});
self.myValue(val);
};
};
self.log = ko.observableArray([]);
}
var model = new Model();
ko.applyBindings(model);
The select "one" and select "four" buttons work to change the selection by forcing an update of myValue(). However, the clear the selection button doesn't work. The selection is not cleared by myValue(null), which is what I thought was the proper way to do it.
What am I doing wrong?

You need the optionsCaption binding set.
<select data-bind="options: myOptions, value: myValue, optionsCaption: 'select...'"></select>
Updated Fiddle