Forward:
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.
Code:
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <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/>
Conclusion:
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.
Confusion:
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...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
