下拉框移动 jquery

Posted fpflog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了下拉框移动 jquery相关的知识,希望对你有一定的参考价值。

<%@ 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的主要内容,如果未能解决你的问题,请参考以下文章

jquery动态添加下拉框选项设置下拉框样式怎么做啊

jquery怎么去掉下拉框边框

jquery如何去掉下拉框中重复的值

jQuery操作select下拉框的text值和value值的方法

jquery 怎么把下拉框选中的值 赋给文本框

“jquery”中怎么让下拉框不能选择?