jq drop-down list and move around

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>
		<style>
			#leftName , #btn,#rightName{
				float: left;
				width: 100px;
				height: 300px;
			}
			#toRight,#toLeft{
				margin-top:100px ;
				margin-left:30px;
				width: 50px;
			}

			.border{
				height: 500px;
				padding: 100px;
			}
		</style>
		<script>
				$ ( "# ToRight") the Click (function () {.
				// ToRight
			$ (function () {
			// Requirements: drop-down list to select the function to realize about the selected item
					// get the object to the right of the drop-down list, append (left drop-down list to select the option)
					. $ ( "# rightName") the append ($ ( "# leftName> the Option: the Selected")); 
                }); 

                // toLeft 
                $ ( "# toLeft") the Click (function (.) { 
                    // get the right selected the appendTo option, move it to the left of the drop-down list 
                    $ ( "# rightName> the Option: the Selected") the appendTo ($ ( "# leftName"));. 

                }); 

                // Double-click the left option, select move to the right, note: the effect can not be achieved, add dynamic tags can not be bound event 
                . / * $ ( "# leftName> the Option") the DblClick (function () { 
                    . $ ( "# rightName") the append (the this); 

                }) * /
 
                // Double-click the right option, move to the left select, pay attention: the effect can not be achieved, the label can not be added dynamically bind events
				/ * $ ( "# rightName> Option") DblClick (function () {. 
                    $ ( "# leftName") the append (the this);. 
                }) * / 
		<div class = "border">
			<select id="leftName" multiple="multiple">
				<option>张三</option>

                // left double click option, move to the right select the 
                $ ( "# leftName") ON ( "DblClick", "Option", function () {. 
                    $ ( "# RightName") the append (the this);. 

                }) 

                // hand side of the option, movement to the left select the 
                $ ( "# rightName") ON ( "DblClick", "Option", function () {. 
                    $ ( "# leftName") the append (the this);. 
                }) 
            }); 
		< / Script> 
	</ head> 
	<body> 
				<the Option> John Doe </ the Option> 
				<the Option> Wang Wu </ the Option> 
				<the Option> Zhao six </ the Option> 
			</ the SELECT> 
			<div the above mentioned id = "btn">
				<input type="button" id="toRight" value="-->"><br>
				<input type="button" id="toLeft" value="<--">
			</div>
			<select id="rightName" multiple="multiple">
				<option>钱七</option>
			</select>
		</div>
	</body>
</html>

  

Guess you like

Origin www.cnblogs.com/bo123/p/11332627.html