码迷,mamicode.com
首页 > 移动开发 > 详细

下拉框移动 jquery

时间:2019-12-22 13:04:42      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:ndt   utf-8   function   har   end   html   北京   append   input   

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>下拉框移动</title>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
.all{
width: 700px;
height:500px;
}
.left{
margin-left: 50px;
margin-top: 100px;
width: 200px;
height:100px;
float: left;
}
.mod{
margin-top: 100px;
margin-left: 100px;
width: 100px;
height: 100px;
float: left;
}
.right{
margin-top: 100px;
width:200px;
height:100px;
float: right;
}
select{
width:200px;
height:100px;
}
</style>
<script>
$(function () {
$(".leftbtn").click(function () {
$(".rightsel").append($(".leftsel > option:selected"));
});
$(".reghtbtn").click(function () {
$(".rightsel > option:selected").appendTo($(".leftsel"));
});
});


</script>
</head>
<body>
<div class="all">
<div class="left">
<select multiple="multiple" class="leftsel">
<option>山东</option>
<option>山西</option>
<option>陕西</option>
<option>北京</option>
<option>上海</option>
</select>
</div>
<div class="mod">
<br>
<input type="button" value="-->" class="leftbtn"><br><br><br>
<input type="button" value="<--" class="reghtbtn">
</div>
<div class="right">
<select class="rightsel" multiple="multiple">
<option>江苏</option>
</select>
</div>
</div>
</body>
</html>

下拉框移动 jquery

标签:ndt   utf-8   function   har   end   html   北京   append   input   

原文地址:https://www.cnblogs.com/fpflog/p/12079418.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!