使用jQery完成下拉列表左右选择

Leefs 2019-11-12 PM 1457℃ 0条

# 使用jQery完成下拉列表左右选择

### 前言

今天说说小编这几天学习前端的一些经历吧，首先，小编是做Java后台开发的，对前端知道的很少，最初学前端是从VUE框架开始，在网上搜了一个很不错的VUE视频，看的是津津有味，但是这样的学习过程是很漫长的，而且最初的学习都是跟着视频一点一点敲，一点一点练习，这样的速度对与每天要跟进的项目来说是根本达不到要求，昨天经过大佬的一番教导之后，重新开始了新的学习路线。

写代码，不管是后端还是前端，最重要的是思想，实现一个功能的方法有许多种，如果将实现这个功能的思想想明白，然后每一步该做什么整理清楚以后，下面要做的就是查API、查资料进行逐个的代码实现。

**写代码思想真的很重要**

### 一、功能分析

![JqueryDemo02.png][1]

左右两个列表栏，分别是**已有商品**和**未有商品**，所要实现的效果：在已有商品列表中选中一个商品，点击`>>`或直接进行双击，**已有商品**列表中的商品将移动到**未有商品**列表中，点击`>>>`则左侧列表栏全部移动到右侧列表栏当中。

右侧列表栏中的操作与左侧相反。

### 二、代码

```html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表左右选择</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
			$(function(){
				/*1.选中单击去右边*/
				$("#selectOneToRight").click(function(){
					$("#left option:selected").appendTo($("#right"));
				});
				
				/*2.单击全部去右边*/
				$("#selectAllToRight").click(function(){
					$("#left option").appendTo($("#right"));
				});
				
				/*3.选中双击去右边*/
				$("#left option").dblclick(function(){
					$("#left option:selected").appendTo($("#right"));
				});
			});
		</script>
	
	</head>
	<body>
		<table border="1" width="600" align="center">
			<tr>
				<td>
					<span style="float: left;">
						<font color="green" face="宋体">已有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
							<option>IPhone6s</option>
							<option>小米4</option>
							<option>锤子T2</option>
						</select>
						<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
						<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
					</span>
					<span style="float: right;">
						<font color="red" face="宋体">未有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
							<option>三星Note3</option>
							<option>华为6s</option>
						</select>
						<p><a href="#" ><<</a></p>
						<p><a href="#" ><<<</a></p>
					</span>
				</td>
			</tr>
		</table>
	</body>
</html>
```

*代码来源于网络：[链接地址](https://blog.csdn.net/a502367897/article/details/80956289)*

我相信直接复制粘贴不需要改动就可以运行的代码都是非常受欢迎的。

> 思路

选中单击`>>`去右边`Jquery`

操作步骤：

> 1. 根据Id拿到点击事件触发事件执行相应方法
>
> 2. 执行方法，删除左侧选中的元素
> 3. 将该元素追加到右方选择器当中

```js
//代码
$("#selectOneToRight").click(function(){
    const selectLeft = $("#left option:selected");//获取选中的选项
    const reomve = selectLeft.remove();//删除下拉列表中的选项
    selectLeft.appendTo("#right");
});
```

这时我们发现将**删除下拉列表中的选项**操作注释掉也可以达到我们想要的效果

```js
//代码
$("#selectOneToRight").click(function(){
    const selectLeft = $("#left option:selected");//获取选中的选项
    selectLeft.appendTo("#right");
});
```

对此小编就不是太理解了，如果有前端大佬路过，希望帮忙指点一二。

此时可以将两行代码进行合并，就可得到

```js
$("#selectOneToRight").click(function(){
    $("#left option:selected").appendTo($("#right"));
});
```

> 方法说明

**appendTo():**在被选元素的结尾插入指定内容

**:selected:**选择器选取被选择的`<option>`元素。

### 总结

其它`jQuery`代码和该事件**思想**基本相同就不进行一一分析了，有兴趣的小伙伴可以根据左侧实现的功能将右侧的功能进行实现。

[1]: https://lilinchao.com/usr/uploads/2019/11/3615808135.png

标签: 前端, Jquery

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://www.lilinchao.com/archives/158.html

上一篇记一次Jquery的基本操作

下一篇 JVM学习(三)--常量的本质含义

使用jQery完成下拉列表左右选择

评论啦~

栏目分类

标签云

友情链接申请

使用jQery完成下拉列表左右选择

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请