First, directly on the code
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8" />5 <title>Index</title>6 </Head>7 <Body>8 <Div>9 <SelectID= "Leftselector"multiple= "multiple"name= "Smslistonleft"style= "height:100px; width:50px">Ten <optionvalue= "0">0</option> One <optionvalue= "1">1</option> A <optionvalue= "2">2</option> - <optionvalue= "3">3</option> - <optionvalue= "4">4</option> the <optionvalue= "5">5</option> - </Select> - - <spanstyle= "top:30px; position:fixed;"> + <inputtype= "button"value= "<<"ID= "Btnleft" /> - <inputtype= "button"value= ">>"ID= "Btnright" /> + </span> A at <SelectID= "Rightselector"multiple= "multiple"name= "Smslistonright"style= "height:100px; width:50px; margin-left:80px"> - <optionvalue= "6">A</option> - <optionvalue= "7">B</option> - <optionvalue= "8">C</option> - <optionvalue= "9">D</option> - <optionvalue= "Ten">E</option> in </Select> - to </Div> + - <BR> the * <inputtype= "button"onclick= "SelectAll ()"ID= "Btnselectall"value= "SelectAll" /> $ Panax Notoginseng <Scriptsrc= "Js/jquery-2.1.4.js"></Script> - <Script> the $("#btnRight"). Click (function () { + //data set assigned to variable vselect by option selected A varVselect= $("#leftSelector option:selected"); the //clone data added to Rightselector + Vselect.clone (). AppendTo ("#rightSelector"); - //remove option from Leftselector at the same time $ Vselect.remove (); $ }); - - //Right move the $("#btnLeft"). Click (function () { - varVselect= $("#rightSelector option:selected");Wuyi Vselect.clone (). AppendTo ("#leftSelector"); the Vselect.remove (); - }); Wu - functionSelectAll () { About varLst1=Window.document.getElementById ("Rightselector"); $ varlength=lst1.options.length; - for (varI= 0; I<length; I++) { - varv=Lst1.options[i].value; //the value within option - varT=Lst1.options[i].text; //Text to display A Alert (v+ ":" +t); + } the } - </Script> $ the </Body> the </HTML>
Two
JQuery: Implementing interop for two <select> controls