Issue
I would like to have a feature on my site that allows me to have a select drop-down and upon selecting an option, it will lock that option into place by replacing the select with a button that holds onto that text.
I am using KnockoutJS, with jQuery.
I suppose I could always just use KnockoutJS's HTML data-bind and just manipulate the select/button in the background using JavaScript but with all the fancy things Knockout can do, thought maybe there was a better option.
Solution
I would use the Knockout's visible
binding. In this example the select
and button
are toggled based on the value's length, but you could also use a second property to toggle visibility in case you might need to show the select
again at some point.
HTML
<select data-bind="value: test, visible: !test().length">
<option></option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<button data-bind="text: test, visible: test().length"></button>
JavaScript
var ViewModel = {
test: ko.observable('')
};
ko.applyBindings(ViewModel);
Here's a fiddle: http://jsfiddle.net/bQKt6/2/
Here's a fiddle that uses a secondary property to toggle visibility along with a click handler on the button
that shows the select
again: http://jsfiddle.net/LYhDx/1/
Answered By - Charlie
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.