jquery实现下拉框内容左右移动

最新推荐文章于 2021-08-22 21:45:02 发布

原创

最新推荐文章于 2021-08-22 21:45:02 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #button #javascript #input #float

这篇博客介绍了如何利用jQuery实现下拉框内容在左右两个下拉框之间移动的功能。通过监听按钮点击事件，获取并判断选项是否被选中，然后将选中的选项移动到目标下拉框。提供了完整的HTML和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每天来看一下。博客写了没人看委屈，还是要坚持继续写下去呀，留着自己看哈

如题，下面先来说一下jquery实现下拉框中的内容左右移动的思路（个人理解）

jquery代码（不考虑静态页面）先来考虑从左往右、

1、为“向左移动”这个按钮添加一个事件

2、获取左边的select的所有的option

3、判断哪些option被选中（option的一个属性selected，若为true则被选中，false反之）

4、向右边的select的option中追加选中的内容

5、全部移动只需要吧判断去掉就可以了。

==========================================下面贴上代码，有点乱，大致轮廓还是有的

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery双下拉框内容移动</title>
<script language="javascript" type="text/javascript" src="../../jQuery/include/jquery-1.7.1.min.js">
</script>

<script language="javascript" type="text/javascript">

$(document).ready(function (){
    //向右移动
    $("#right").click(function (){
        var left = $("#select1")[0].options;
    //    alert(le.length);
//
        $(left).each(function (index,domEle){
     &nb

最低0.47元/天解锁文章

200万优质内容无限畅学