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.