Browse DevX
Sign up for e-mail newsletters from DevX


How To Move Items Between Lists with JavaScript-2 : Page 2




Building the Right Environment to Support AI, Machine Learning and Deep Learning

The List Selection User Interface
This solution has been tested with IE 6, Mozilla 1.3, and Opera 7.01. The requirements for this application are:
  • Present the user with a list of available options.
  • Provide a second list to hold the user's selected options.
  • Provide a mechanism for the user to add one or all options from the options list to the selected list.
  • Provide a mechanism for the user to remove one or all of the options from the selected list.
  • Display each option in either list box, but not both.
In addition, I'd like to display each of the items in one list or the other all the time so that users don't have to scroll to view any item. Figure 1 shows how the sample application looks running in Mozilla.
Figure 1: Here's how the sample application looks running in Mozilla. It looks similar in the other tested browsers.

Set Up the HTML
Open your favorite text editor and enter the following HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>List Box Demo</title> <script type="text/javascript" src="option.js"> </script> </head> <body onload="createListObjects()"> <table border="0"> <tr> <td><select size="4" id="availableOptions" name="availableOptions"> <option value="option1"> option1 </option> <option value="option3"> option3 </option> <option value="option5"> option5 </option> <option value="option7"> option7 </option> </select> </td> <td valign="top"><button onclick="addAll()">>>></button> <br> <button onclick="addAttribute()"> ></button> <br> <br> <button onclick="delAttribute()"> <</button> <br> <button onclick="delAll()"> <<<</button> </td> <td><select size="4" id="selectedOptions" name="selectedOptions"> <option value="option2"> option2 </option> <option value="option4"> option4 </option> <option value="option6"> option6 </option> <option value="option8"> option8 </option> </select> </td> </tr> <tr> <td colspan="2"><button onclick="showSelected()"> Submit</button> </td> </tr> </table> </body> </html>

Save the file as option.htm. In this example, I've hard-coded the options available but you can populate the options dynamically and the solution will work just fine.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date