Two listbox implementation options: add, delete, and search _ javascript skills

It is incredible that listbox can implement the addition, deletion, and search of options. As for how to implement it, the specific code may help you by reading this article. Add, delete, and search two listbox Implementation Options

Paste the main js Code and I will not upload some resources. Below is.

Group. js

The Code is as follows:

Function addMember ()
{
// Add the selected items on the right to the left
Var add = $ ("# newAddMembersId"). val ();
Var del = $ ("# deleteMembersId"). val ();
Var ext = $ ("# existedMemberId"). val ();
Var newAddId = "";
// Obtain the newly added userId
Var addedUsers = $ ("# enterpriseMember input: checkbox [checked]");
For (var I = 0; I {
Var checkbox = $ (addedUsers [I]);
Var uid = checkbox. next (). val ();
If (add. indexOf (uid)> = 0 | (ext. indexOf (uid)> = 0 & del. indexOf (uid) <0 ))
{
Continue;
}
If (! (Ext. indexOf (uid)> = 0 & del. indexOf (uid)> = 0 ))
{
If (add. indexOf (uid) <0)
{
If (add. length = 0)
Add + = uid;
Else
Add + = "," + uid;
}
}
// Add data to the left-side list
Checkbox. removeAttr ("checked ");
Var userDiv = checkbox. parent ();
$ ("# GroupMember"). append (userDiv. clone ());
Del = del. replace (uid + ",","");
Del = del. replace (uid ,"");
$ ("# DeleteMembersId"). val (del );

}

$ ("# NewAddMembersId"). val (add );

}

Function removeMember ()
{
// Remove a member from the left
Var add = $ ("# newAddMembersId"). val ();
Var del = $ ("# deleteMembersId"). val ();
Var newRemoveId = "";

Var removedUsers = $ ("# groupMember input: checkbox [checked]");
For (var I = 0; I {
Var checkbox = $ (removedUsers [I]);
Var uid = checkbox. next (). val ();
If (del. indexOf (uid)> = 0)
{
Continue;
}
If (del. indexOf (uid) <0)
{
If (del. length = 0)
Del + = uid;
Else
Del + = "," + uid;
}
// Remove data from the list on the left
Checkbox. removeAttr ("checked ");
Var userDiv = checkbox. parent ();
UserDiv. remove ();
// $ ("# EnterpriseMember"). append (userDiv );
Add = add. replace (uid + ",","");
Add = add. replace (uid ,"");
$ ("# NewAddMembersId"). val (add );

}

$ ("# DeleteMembersId"). val (del );
}
// Search for members by name and Department
Function searchMember ()
{

Var searchTxt = $. trim ($ ("# searchTxt"). val ());
Var memberLIsts = $ (". dmlist ");
// Remove the last result
Var lastReusts = $ (". tempResult ");
For (var I = 0; I {
$ (LastReusts [I]). remove ();
}
// Empty search to display all lists
If (searchTxt = "" | searchTxt = "Search enterprise member ")
{
// Show all hidded ml
For (var I = 0; I {
Certificate (memberlistspoliciuncs.css ("display ","");
}
Return;
}
// Hide all memberlist to hide all lists
For (var I = 0; I {
Certificate (memberlistspoliciuncs.css ("display", "none ");
}
// Search -------------
Var enterpriseMemberDiv =$ ("# enterpriseMember ");
// Search by name, add class: tempResult
Var names = $ (". sname ");
For (var I = 0; I {
Var name = $ (names [I]). text ();
If (name. indexOf (searchTxt)> = 0)
{
Var result = $ (names [I]). parent (). clone ();
Result. addClass ("tempResult ");
Result.css ("display ","");
EnterpriseMemberDiv. append (result );
}
}

// Search by departmentName
Var departmentNames = $ (". sdepartment ");
For (var I = 0; I {
Var name = $ (departmentNames [I]). text ();
If (name. indexOf (searchTxt)> = 0)
{
Var result = $ (departmentNames [I]). parent (). parent (). clone ();
Result. addClass ("tempResult ");
Result.css ("display ","");
EnterpriseMemberDiv. append (result );
}
}
}

Function clearTxt ()
{
Var txt = $. trim ($ ("# searchTxt"). val ());
If (txt = "Search for enterprise members ")
$ ("# SearchTxt"). val ("");

}
Function setsearchTxt ()
{
Var txt = $. trim ($ ("# searchTxt"). val ());
If (txt = "")
$ ("# SearchTxt"). val ("Search enterprise member ");

}
// Expand the folder
Function folderToggle (event, basePath)
{
Var evnet = event | window. event;
Var arrowdiv1_event.tar get | event. srcElement;
Var closeimg = basePath + "/images/folder_close.PNG ";
Var openimg = basePath + "/images/folder_open.PNG ";
Var srcval = $ (arrowDiv). attr ("src ");
If (srcval = closeimg)
$ (ArrowDiv). attr ("src", openimg );
If (srcval = openimg)
$ (ArrowDiv). attr ("src", closeimg );

Var listDiv = $ (arrowDiv). parent (). next ();
ListDiv. toggleClass ("memberlist ");

}
// Click the name to fold
Function folderNameToggle (event, basePath)
{
Var evnet = event | window. event;
Var arrowdiv1_event.tar get | event. srcElement;
Var closeimg = basePath + "/images/folder_close.PNG ";
Var openimg = basePath + "/images/folder_open.PNG ";
Var srcval = $ (arrowDiv). attr ("src ");
If (srcval = closeimg)
$ (ArrowDiv). attr ("src", openimg );
If (srcval = openimg)
$ (ArrowDiv). attr ("src", closeimg );

Var listDiv = $ (arrowDiv). parent (). next (). next ();
ListDiv. toggleClass ("memberlist ");

}

Function folderNumToggle (event, basePath)
{
Var evnet = event | window. event;
Var arrowdiv1_event.tar get | event. srcElement;
Var closeimg = basePath + "/images/folder_close.PNG ";
Var openimg = basePath + "/images/folder_open.PNG ";
Var srcval = $ (arrowDiv). attr ("src ");
If (srcval = closeimg)
$ (ArrowDiv). attr ("src", openimg );
If (srcval = openimg)
$ (ArrowDiv). attr ("src", closeimg );

Var listDiv = $ (arrowDiv). parent (). parent (). next (). next ();
ListDiv. toggleClass ("memberlist ");

}


Function setCss (event, onoff)
{
Var theclass = $. trim (onoff );
Var offclass = "addmemberBtnoff ";
Var onclass = "addmemberBtnon ";
Var event = event | window. event;
Var thisbtn1_event.tar get | event. srcElement;
$ (Thisbtn). removeClass (onclass );
$ (Thisbtn). removeClass (offclass );
If (theclass = "on ")
{
$ (Thisbtn). addClass (onclass );
}
Else
{
$ (Thisbtn). addClass (offclass );
}

}

Test. jsp

The Code is as follows:

<% @ Page language = "java" pageEncoding = "UTF-8" %>
<% @ Include file = "/pages/common/Taglibs. jsp" %>
<% @ Include file = "/pages/common/Header. jsp" %>





Add group members