Skip to content

Instantly share code, notes, and snippets.

@msh9

msh9/CompleteTwoSelects.html

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save msh9/63c575e043ca2b6800aa to your computer and use it in GitHub Desktop.
Save msh9/63c575e043ca2b6800aa to your computer and use it in GitHub Desktop.
Download ZIP
Slightly more complex select box and knockoutjs
Raw
CompleteTwoSelects.html
<!DOCTYPE HTML>
<head>
<title>A working shuttle</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = function() {
var self = this;
self.someFunction = function() {
alert('hello');
};
//object containers
self.myList = ko.observableArray();
self.myOtherList = ko.observableArray();
//selected ids
self.selectedMyList = ko.observableArray();
self.selectedMyOtherList = ko.observableArray();
self.moveLeft = function() {
var sel = self.selectedMyOtherList();
for (var i = 0; i < sel.length; i++) {
var selCat = sel[i];
var result = self.myOtherList.remove(function(item) {
return item.id == selCat;
});
if (result && result.length > 0) {
self.myList.push(result[0]);
}
}
self.selectedMyOtherList.removeAll();
}
self.moveRight = function() {
var sel = self.selectedMyList();
for (var i = 0; i < sel.length; i++) {
var selCat = sel[i];
var result = self.myList.remove(function(item) {
return item.id == selCat;
});
if (result && result.length > 0) {
self.myOtherList.push(result[0]);
}
}
self.selectedMyList.removeAll();
}
self.myList.push({ id: 1
, name: 'Option 1'
});
self.myList.push({ id: 2
, name: 'Option 2'
});
self.myList.push({ id: 3
, name: 'Option 3'
});
}
if (window.addEventListener) {
window.addEventListener('load', function() {
var viewModel = vm();
ko.applyBindings(viewModel);
}, false); // NB **not** 'onload'
} else if (window.attachEvent) {
window.attachEvent('onload', function () {
var viewModel = vm();
ko.applyBindings(viewModel);
});
}
</script>
</head>
<body>
<body>
<select multiple='multiple' data-bind="options: myList, optionsText: 'name', optionsValue: 'id', selectedOptions: selectedMyList "></select>
<select multiple='multiple' data-bind="options: myOtherList, optionsText: 'name', optionsValue: 'id', selectedOptions: selectedMyOtherList "></select>
<button data-bind="click: moveLeft">Move left</button>
<button data-bind="click: moveRight">Move right</button>
</body>
</body>
Raw
Example.html
<!DOCTYPE HTML>
<head>
<title>A Knockout select example</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = function() {
var self = this;
self.someFunction = function() {
alert('hello');
};
self.myList = ko.observableArray();
self.myList.push({ id: 1
, name: 'Option 1'
});
self.myList.push({ id: 2
, name: 'Option 2'
});
self.myList.push({ id: 3
, name: 'Option 3'
});
}
if (window.addEventListener) {
window.addEventListener('load', function() {
var viewModel = vm();
ko.applyBindings(viewModel);
}, false);
} else if (window.attachEvent) {
window.attachEvent('onload', function () {
var viewModel = vm();
ko.applyBindings(viewModel);
});
}
</script>
</head>
<body>
<select multiple='multiple' data-bind="options: myList, optionsText: 'name', optionsValue: 'id' "></select>
<button data-bind="click: someFunction">Click me</button>
</body>
Raw
TwoSelects.html
<!DOCTYPE HTML>
<head>
<title>A Knockout select example</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = function() {
var self = this;
self.someFunction = function() {
alert('hello');
};
self.myList = ko.observableArray();
self.myList.push({ id: 1
, name: 'Option 1'
});
self.myList.push({ id: 2
, name: 'Option 2'
});
self.myList.push({ id: 3
, name: 'Option 3'
});
self.myOtherList = ko.observableArray();
self.myOtherList.push({ id: 1
, name: 'Option 1'
});
self.myOtherList.push({ id: 2
, name: 'Option 2'
});
self.myOtherList.push({ id: 3
, name: 'Option 3'
});
if (window.addEventListener) {
window.addEventListener('load', function() {
var viewModel = vm();
ko.applyBindings(viewModel);
}, false);
} else if (window.attachEvent) {
window.attachEvent('onload', function () {
var viewModel = vm();
ko.applyBindings(viewModel);
});
}
</script>
</head>
<body>
<select multiple='multiple' data-bind="options: myList, optionsText: 'name', optionsValue: 'id' "></select>
<select multiple='multiple' data-bind="options: myOtherList, optionsText: 'name', optionsValue: 'id' "></select>
<button data-bind="click: someFunction">Click me</button>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment