\nOne thing I’ve started to do for web based admin systems is a far greater use of JavaScript.\n<\/p>\n
\nOne 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.\n<\/p>\n
\nI do this by using a version of the following JavaScript. It takes a \nLets have a quick look at the code…\n<\/p>\n \nFirst we need to define our function. Here I’ve called it \nNow we need to iterate over the first list to check each \nIf the current \nIf \nWhere \nWe 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.\n<\/p>\n \nLets put this all together for our final code…\n<\/p>\n \nHere is some example HTML that uses the JavaScript to copy from list1 to list2.\n<\/p>\n<select><\/code> HTML element with the property multiple=\"multiple\"<\/code> set, and copies to another <select><\/code> HTML<\/acronym> element, also with multiple=\"multiple\"<\/code> set. I have a button set to execute the JavaScript via an onClick<\/code> handler.\n<\/p>\ndoCopy<\/code> and it takes two parameters which are the two <select><\/code> elements from the DOM<\/acronym>, eg document.formname.selectname<\/code>.\n<\/p>\nfunction doCopy(list1, list2) {<\/code><\/div>\n<option><\/code> to see if it has been selected.\n<\/p>\nfor (var i=0; i< list1.length; i++) {
\nif (list1.options[i].selected == true) {
\n<\/code><\/div>\n<option><\/code> 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<\/code> that is set to false if we find we already have it in the second list.\n<\/p>\nvar cancopy = true;
\nfor (var j=0; j< list2.length; j++) {
\nif (list1.options[i].value == list2.options[j].value) {
\ncancopy = false;
\nbreak;
\n}
\n}
\n<\/code><\/div>\ncancopy<\/code> 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<\/code> object. Let’s have a quick look at the Option<\/code> class in JavaScript. We can constuct a new Option<\/code> like this…\n<\/p>\nnew Option(text, value, defaultSelected, selected)<\/code><\/div>\ntext<\/code> is the text to show, value<\/code> is value, defaultSelected<\/code> is a boolean defining if we want the defaultSelected property set, and selected<\/code> is a boolean defining if we want the selected property set.\n<\/p>\nif (cancopy == true) {
\nlist2.options[list2.options.length] = new Option(list1.options[i].text, list1.options[i].value, false, true);
\n}
\n<\/code><\/div>\nfunction doCopy(list1, list2) {
\nfor (var i=0; i< list1.length; i++) {
\nif (list1.options[i].selected == true) {
\nvar cancopy = true;
\nfor (var j=0; j< list2.length; j++) {
\nif (list1.options[i].value == list2.options[j].value) {
\ncancopy = false;
\nbreak;
\n}
\n}
\nif (cancopy == true) {
\nlist2.options[list2.options.length] = new Option(list1.options[i].text, list1.options[i].value, false, true);
\n}
\n}
\n}
\n}
\n<\/code><\/div>\n