After mastering the basic knowledge of jQ, let's see how jQ can realize the transfer of the text content of the drop-down box?
In fact, before that, I also wrote an article using js to transfer the text content of drop-down box, which requires strong logic. jQ simplifies code writing and is easy to understand.
Write in the front: be sure to import the js library. It is recommended not to update it.
Direct code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wide {
width: 400px;
margin: 0 auto;
}
.selcetwords {
width: 100px;
}
</style>
</head>
<body>
<div class="wide">
<!--<form action="#" method="get" name="myform">-->
<select size="10" name="leftwords" id="leftwords" class="selcetwords" multiple="multiple">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
</select>
<button id="rightmove">Right shift</button>
<button id="leftmove">Left shift</button>
<select size="10" name="rightwords" id="rightwords" class="selcetwords" multiple="multiple">
<option value="xxx">xxx</option>
<option value="yyy">yyy</option>
<option value="zzz">zzz</option>
</select>
<!--</form>-->
</div>
</body>
<script type="text/javascript">
$().ready(
function(){
$("#rightmove").click(
function(){
$("option:selected").appendTo($("#rightwords"));
}
);
$("#leftmove").click(
function(){
$($("#leftwords")).append($("option:selected"));
}
);
}
);
</script>
</html>
The above code can be used directly for learning and communication. Please state the source address for reprint.