Add and remove multiple select statements using jquery _ Jian

Source: Internet
Author: User


Jian is working on graduation design recently

One of the operations on the front-end page is to select a select option and add it to another select

You can click the second select to remove the selected option.



If you don't talk about anything else, paste the Code directly.

Of course, you must first ensure that the correct JS


<! -- Author ==>> Jian --> <br/> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" ""> <br/> <HTML xmlns = ""> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = GBK "/> <br/> <title> jquery select </title> <br/> <SCRIPT type =" text/JavaScript "src =" jquery-1.4.min.js "> </SCRIPT> <br/> <script language = "JavaScript"> <br/>/ Onchange () event in/select <br/> function selectchange () {<br/> $ ("# addbt "). ATTR ("disabled", false); // first, set the Add button to available <br/> var SelectObject = $ ("# myselect "). val (); // obtain the value selected on the left <br/> $ ("# myresult "). find ("option "). each (function () {// query all the options on the right using the option parameter and traverse them one by one <br/> if ($ (this ). val () = SelectObject) {// determine whether the selected item on the left already exists in the right <br/> // alert ("I got you! "); <Br/> $ (" # addbt "). ATTR ("disabled", true); // if the above judgment exists, set the Add button to unavailable. Do not add it again <br/>}< br/> }); <br/>}</P> <p> // Add on the left to the right <br/> function toadd () {</P> <p> var SelectObject = $ ("# myselect "). val (); // obtain the value selected on the left <br/> If (null = SelectObject) {<br/> alert ("[Jian's tips] You have not selected any content that can be added! "); <Br/> return; <br/>}< br/> var content = "<option value = '" + SelectObject + "'>" + SelectObject + "</option> "; // fill in the value on the right <br/> $ ("# myresult "). append (content); <br/> selectchange (); // call selectchange () to simulate the onchange () event, the main purpose is to promptly reactivate the disabled Add button (if necessary) </P> <p >}</P> <p> // right-side removal <br/> function toremove () {<br/> var removeobject = $ ("# myresult option: Selected "). val (); // get the content to be removed from the right. Be sure to select multiple options. <br/> If (null = removeobject) {<Br/> alert ("[Jian's tips] You have not selected any content to delete! "); <Br/> return; <br/>}< br/> $ (" # myresult option: Selected "). remove (); <br/> selectchange (); // With toadd () <br/>}</P> <p> </SCRIPT> <br/> </pead> </P> <p> <body> <br /> <P style = "color: # f60; Size: Auto "> author: Jian </P> <br/> <Select style =" width: 100px "id =" myselect "size =" 5 "onchange =" selectchange () "> <br/> <option value =" Cao "> CAO Cao </option> <br/> <option value =" Liu Bei "> Liu Bei </option> <br/> <option value = "Sun Quan"> Sun Quan </option> <br/> </SELECT> <br/> <input id = "addbt" name = "addbt" type =" button "value =" add "onclick =" toadd () "/> <br/> <input id =" rmbt "name =" rmbt "type =" button "value =" Remove "onclick =" toremove () "/> <br/> <Select style =" width: 100px "size =" 5 "multiple =" multiple "id =" myresult "> <br/> </SELECT> <br/> </body> <br/>





The requirement of Jian is that the value on the left is stored in the database and has different values for different categories. Therefore, it is designed as a form of Button disabling and activation.

Some demos achieve the effect of clicking Add on the left side of the data, the left side will be removed, and the right side will be added

After the right side is removed, the data will be restored to the left side.

Although Jian does not write this effect, it is not difficult to use static data.

By the way, when filling in data, the value and text attributes of option can be set freely.



If the problem persists, how can I add --> disappear --> remove --> restore data from the database on the left?

In particular, when the select on the left side is also dynamically generated, and there are more than one, that...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.