JSP + Ajax add and delete multiple selection boxes

In this example, JSP + Ajax + text is used to demonstrate the effects of multiple select, all select, add, delete, and update checkbox multi-select boxes..

This example fully demonstrates the use of JavaScript to control HTML Dom and the use of xml http to transmit data, the use of JSP operationsCompositionEffect.

1. Javascript is used to control the reality of page content and add and delete results;
2. jsp acts as the background to read, write, and update text;
3, text format is used to store data, data encoding UTF-8; 4, this example in Win32, Red Hat Linux 9 jdk1.5, Tomcat 5.0, Apache 2.5 debugging through, compatible with Firefox 1.0, opera 8.0, and IE6.

Advantages of this example:

1. Create an HTML object in real time, and add or delete the WYSIWYG page. The display speed is faster and the user experience is increased.
2. xml HTTP transmits data only as an ID or form value, saving bandwidth.
3. This example is applicable to xml http, so this effect is highly practical, but JS/jspCodeIs simple.
4. There are many things that can be used in other projects and solve the problem of operating texts on Chinese character encoding. (This example runs in the Chinese operating system, so the GBK encoding is selected, if the OS is English, it needs to be processed separately, such as encoding to UTF-8, or according to the need to convert the encoding .)
5. You can drag and drop a project to display the closed state. You can use cookies to record the location and enable the closed state.
6. There are rich comments for beginners to explore together.

Disadvantages:

1. Maintenance and debugging are troublesome. Is it worth doing so for this effect? If you embed an IFRAME in a normal way, will it work.
2. The code is not optimized or abbreviated, and sometimes redundant.
3. The interaction design is not well done. Here we mainly show the technical implementation and communication.

Source File Download: Checkbox.rar

<Meta name = "generator" content = "editplus"> <meta name = "author" content = ""> <meta name = "keywords" content = ""> <meta name = "Description" content = ""> <br/> <style>. drag {position: absolute; width: 600px; Background-color: # f1f1f1; filter: alpha (opacity = 100);-moz-opacity: 1.0; opacity: 1.0 ;}. da {width: 100%; Background-color: Gray; cursor: move; font-size: 14px; Vertical-align: middle; line-Height: 30px }. max_min_btn {float: Right; color: red; cursor: pointer; font-size: 9pt; width: 50px; line-Height: 30px; text-align: center ;} # list {border-top: 2px ridge #9a9898; border-left: 2px ridge #9a9898; border-bottom: 1px solid # d4d0c8; border-Right: 1px solid # d4d0c8; background: white; width: 578px; Height: 350px; margin: 10px; overflow: auto }. shadowbottom {margin-left: 6px; Height: 5px; Background: Gray; font-size: 0px; line-Height: 0px; filter: alpha (opacity = 5 5);-moz-opacity: 0.55; opacity: 0.55 ;} </P> </style> <PRE> in this example, JSP + Ajax + text is used to demonstrate the effects of multiple selection, full selection, adding, deleting, and updating checkbox multiple selection boxes. This example shows how to use JavaScript to control HTML Dom and xml http to transmit data, and JSP to manipulate text. 1. Javascript is used to control the reality of page content and add and delete results; 2. jsp is used as the background to read, write, and update text; 3. The text format is used to store data, data Encoding UTF-8; 4, this example in Win32, Red Hat Linux 9 JDK 5.0, Tomcat 2.5, Apache 1.0 debugging passed, while compatible with Firefox 8.0, opera, IE6. Online Documentation detail (detailed description, then added) source file: http://jarryli.googlepages.com/checkbox.rar in addition to the previous PHP + Ajax post <SPAN class = 'wp _ keywordlink '> Program </span> instance: http://jiarry.blogchina.com/5555296.html source code download: http://jarryli.googlepages.com/post_ajax.rar JSP certificate code brushless new prompt: http://jiarry.blogchina.com/5287654.html source code download: http://jarryli.googlepage S.com/imgvalidate.rar <SPAN class = "max_min_btn" id = "max_min" style = "background-color: #333"> 2 close </span> drag-and-drop area Cody by JarryLi@gmail.com; copyright? Jarry, all right reserved! This example is for personal reference only. Please retain the copyright information for reference. Thank you! Homepage: jiarry.126.com blog: http://jiarry.blogchina.com </PRE> <p>