One thing I’ve started to do for web based admin systems is a far greater use of JavaScript.
One task I find I do quite frequently is copying from a list of options to a sublist of selected options. For example, a list of all blog entries to a sublist of related blog entries.
I do this by using a version of the following JavaScript. It takes a <select> HTML element with the property multiple="multiple" set, and copies to another <select> HTML element, also with multiple="multiple" set. I have a button set to execute the JavaScript via an onClick handler.
Lets have a quick look at the code…
First we need to define our function. Here I’ve called it doCopy and it takes two parameters which are the two <select> elements from the DOM, eg document.formname.selectname.
function doCopy(list1, list2) {
Now we need to iterate over the first list to check each <option> to see if it has been selected.
for (var i=0; i< list1.length; i++) {
if (list1.options[i].selected == true) {
If the current <option> is selected, we need to iterate over the second list, making sure we don’t already have it in the list. I’m setting a temporary variable, cancopy that is set to false if we find we already have it in the second list.
var cancopy = true;
for (var j=0; j< list2.length; j++) {
if (list1.options[i].value == list2.options[j].value) {
cancopy = false;
break;
}
}
If cancopy is true, then we’re OK to copy the item over to the second list. To do this we have to create a new Option object. Let’s have a quick look at the Option class in JavaScript. We can constuct a new Option like this…
new Option(text, value, defaultSelected, selected)
Where text is the text to show, value is value, defaultSelected is a boolean defining if we want the defaultSelected property set, and selected is a boolean defining if we want the selected property set.
We need to initialise our new Option with the value and text of our original option from list one, and set it as selected. We insert this into the secondlist by adding it to the very of its array. This will grow the list automatically.
if (cancopy == true) {
list2.options[list2.options.length] = new Option(list1.options[i].text, list1.options[i].value, false, true);
}
Lets put this all together for our final code…
function doCopy(list1, list2) {
for (var i=0; i< list1.length; i++) {
if (list1.options[i].selected == true) {
var cancopy = true;
for (var j=0; j< list2.length; j++) {
if (list1.options[i].value == list2.options[j].value) {
cancopy = false;
break;
}
}
if (cancopy == true) {
list2.options[list2.options.length] = new Option(list1.options[i].text, list1.options[i].value, false, true);
}
}
}
}
Here is some example HTML that uses the JavaScript to copy from list1 to list2.
<form name="mytestform">
<select name="list1" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<input type="button" value="Copy" onClick="doCopy(document.mytestform.list1,document.mytestform.list2);" />
<select name="list2" multiple="multiple">
</select>
</form>
We should now be able to copy between the lists when we click on the Copy button.