前些日子公司让做一个功能模块。对于里面一个小功能费了些周折，现将其总结一下：

一、实现效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVhbmppZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="700" height="600" alt="">

一、实现代码1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<title>select标签multiple属性的用法</title>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

		<script type="text/javascript">

			/**

			 * @param fromSelectId option移动起始select标签id

			 * @param toSelectId option移动目的地select标签id

			 * @param addOrNot boolean类型——true表示当前进行的是加入操作，否则是删除操作

			 * @param moveAllOrNot boolean类型——true表示当前进行的是“所有”操作，否则当前进行的不是“所有”操作

			 */

			function moveOptions(fromSelectId, toSelectId, addOrNot, moveAllOrNot){

				var fromObject = document.getElementById(fromSelectId);

				var toObject = document.getElementById(toSelectId);

				if(fromObject.options.length == 0){

					if(addOrNot){

						alert("没有找到可加入的选项！

");

					}else{

						alert("没有找到可删除的选项！");

					}

					return;

				}

				if(fromObject.selectedIndex == -1 && moveAllOrNot == false){

					if(addOrNot){

						alert("请先选择要加入的选项。");

					}else{

						alert("请先选择要删除的选项！");

					}

					return;

				}

				var toSelectOptionsList = new Array(toObject.options.length);//存放option移动目的地select标签所有option选项

				var toSelectOptionPointer = 0;

				for(; toSelectOptionPointer < toObject.options.length; toSelectOptionPointer ++){//将option移动目的地原有option选项存放到toSelectOptionsList数组中

					if(toObject.options[toSelectOptionPointer] != null){

						toSelectOptionsList[toSelectOptionPointer] = new Option(toObject.options[toSelectOptionPointer].text, toObject.options[toSelectOptionPointer].value);

					}

				}

				for(var i = 0; i < fromObject.options.length; i ++){

					if(fromObject.options[i] != null && (fromObject.options[i].selected == true || moveAllOrNot)){//将新加入的option选项存放到toSelectOptionsList数组中

						toSelectOptionsList[toSelectOptionPointer] = new Option(fromObject.options[i].text, fromObject.options[i].value);

						toSelectOptionPointer ++;

					}

				}

				for(var i = 0; i < toSelectOptionsList.length; i ++){//又一次整合option移动目的地select标签的option选项，以使新加入的显示出来

					if(toSelectOptionsList[ i ] != null){

						toObject.options[ i ] = toSelectOptionsList[ i ];

					}

				}

				for(var i = fromObject.options.length - 1; i >= 0; i --){//又一次整合option移动起始select标签的option选项。以便去掉删除的option选项

					if(fromObject.options[i] != null && (fromObject.options[i].selected == true || moveAllOrNot)){

						fromObject.options[i] = null;

					}

				}

			}

			function getSelectedValues(){

				var selectedValues = "";

				var rightSelectObject = document.getElementById("rightSelect");

				for(var i=0; i<rightSelectObject.options.length; i++){

					selectedValues = rightSelectObject.options[i].value + ',' + selectedValues;

				}

				selectedValues = selectedValues.substring(0, selectedValues.lastIndexOf(','));

				if(selectedValues == ""){

					alert("你没有选择不论什么选项！！

！

");

				}else{

					alert("你选中的值为：" + selectedValues);

				}

			}

		</script>

	</head>

	<body>

		<center style="margin-top:12%"><font color="red" size="5"><b>select标签multiple属性的用法</b></font></center>

		<br/>

		<table border="1" cellspacing="0" align="center">

			<tr>

				<td align="center" width="150px">未选择</td>

				<td align="center" width="150px">操作</td>

				<td align="center" width="150px">已选择</td>

			</tr>

			<tr>

				<td align="center" width="150px">

					<select id="leftSelect" name="leftSelect" multiple="multiple" size="15" style="width:100%; height:100%;">

						<option value="07c9907f-bfb1-4e37-98e6-02224834ef76">荸荠</option>

						<option value="4e1c083f-c988-48b9-9a48-ff7dbe07e51f">胡桃</option>

						<option value="0e685a36-ddd1-4288-b741-8624e4384b58">杨梅</option>

						<option value="0fc09295-ed4d-4e79-9c11-2f0913b421a6">沙枣</option>

						<option value="1cb5eccc-faa3-44df-ba62-bb5fcdf29036">脐橙</option>

						<option value="26e545ae-3647-45aa-8b9f-cef6a8d8c454">芒果</option>

						<option value="2788bd4d-53c2-4571-a562-b8c47e058ff4">枇杷</option>

						<option value="2ab7393a-7478-4451-bb63-e8a91dc63adb">金桔</option>

						<option value="51160f28-44ab-419d-948c-16ba1370613a">青梅</option>

						<option value="baa4df9c-e6f9-4d4d-bfb8-648394942170">毛桃</option>

						<option value="1854fd23-7da0-4d3f-bf4b-21ed97037a0f">金桔</option>

						<option value="43a0912c-ba1b-4700-8616-31f701098b0a">酸橙</option>

						<option value="37a76cf1-0b11-411a-8ce3-bb37383951c4">海棠</option>

						<option value="78a49dc8-3920-47ff-9a3e-b6e31d337d67">槟榔</option>

						<option value="26852cb9-3cde-4b50-bf52-0ad838822665">杨桃</option>

						<option value="a52b4681-2c1b-4520-ab8a-6507b52c2105">樱桃</option>

						<option value="8d3d65f7-5252-4f47-9c9a-960367b06ba7">芭乐</option>

						<option value="7b361600-7c77-44a5-8e03-c043ebddc710">鳄梨</option>

						<option value="5c2f062b-3fd2-44c1-a8e2-0546454978d9">西柚</option>

					</select>

				</td>

				<td align="center" width="150px">

					<input type="button" onclick="moveOptions('leftSelect', 'rightSelect', true, false);" value="加入 >>" style="text-align:center; margin-bottom:10px; width:90px;"/>

					<br/>

					<input type="button" onclick="moveOptions('rightSelect', 'leftSelect', false, false);" value="删除 <<" style="text-align:center; margin-bottom:10px; width:90px;"/>

					<br/>

					<input type="button" onclick="moveOptions('leftSelect', 'rightSelect', true, true);" value="所有加入 >>" style="margin-bottom:10px; width:90px;"/>

					<br/>

					<input type="button" onclick="moveOptions('rightSelect', 'leftSelect', false, true);" value="所有删除 <<" style="margin-bottom:10px; width:90px;"/>

					<br/>

				</td>

				<td align="center" width="150px">

					<select id="rightSelect" name="rightSelect" multiple="multiple" size="15" style="width:100%; height:100%;"></select>

				</td>

			</tr>

		</table>

		<br/>

		<center><input type="button" value="获取选项的value值" onclick="getSelectedValues();"/></center>

	</body>

</html>

【0分下载资源】

二、实现代码2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<title>select标签multiple属性的用法</title>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

		<script type="text/javascript">

			/**

			 * @param fromSelectId option移动起始select标签id

			 * @param toSelectId option移动目的地select标签id

			 * @param addOrNot boolean类型——true表示当前进行的是加入操作，否则是删除操作

			 * @param moveAllOrNot boolean类型——true表示当前进行的是“所有”操作，否则当前进行的不是“所有”操作

			 */

			function moveOptions(fromSelectId, toSelectId, addOrNot, moveAllOrNot){

				var fromObject = document.getElementById(fromSelectId);

				var toObject = document.getElementById(toSelectId);

				if(fromObject.options.length == 0){

					if(addOrNot){

						alert("没有找到可加入的选项！");

					}else{

						alert("没有找到可删除的选项！

");

					}

					return;

				}

				if(fromObject.selectedIndex == -1 && moveAllOrNot == false){

					if(addOrNot){

						alert("请先选择要加入的选项！

");

					}else{

						alert("请先选择要删除的选项！

");

					}

					return;

				}

				var toSelectOptionsList = new Array(toObject.options.length);//存放option移动目的地select标签所有option选项

				var toSelectOptionPointer = 0;

				for(; toSelectOptionPointer < toObject.options.length; toSelectOptionPointer ++){//将option移动目的地原有option选项存放到toSelectOptionsList数组中

					if(toObject.options[toSelectOptionPointer] != null){

						toSelectOptionsList[toSelectOptionPointer] = new Option(toObject.options[toSelectOptionPointer].text, toObject.options[toSelectOptionPointer].value);

					}

				}

				for(var i = 0; i < fromObject.options.length; i ++){

					if(fromObject.options[i] != null && (fromObject.options[i].selected == true || moveAllOrNot)){//将新加入的option选项存放到toSelectOptionsList数组中

						toSelectOptionsList[toSelectOptionPointer] = new Option(fromObject.options[i].text, fromObject.options[i].value);

						toSelectOptionsList[toSelectOptionPointer].title = fromObject.options[i].text;

						toSelectOptionPointer ++;

					}

				}

				for(var i = 0; i < toSelectOptionsList.length; i ++){//又一次整合option移动目的地select标签的option选项。以使新加入的显示出来

					if(toSelectOptionsList[ i ] != null){

						toObject.options[ i ] = toSelectOptionsList[ i ];

					}

				}

				for(var i = fromObject.options.length - 1; i >= 0; i --){//又一次整合option移动起始select标签的option选项，以便去掉删除的option选项

					if(fromObject.options[i] != null && (fromObject.options[i].selected == true || moveAllOrNot)){

						fromObject.options[i] = null;

					}

				}

			}

			function getSelectedValues(){

				var selectedValues = "";

				var rightSelectObject = document.getElementById("rightSelect");

				for(var i=0; i<rightSelectObject.options.length; i++){

					selectedValues = rightSelectObject.options[i].value + ',' + selectedValues;

				}

				selectedValues = selectedValues.substring(0, selectedValues.lastIndexOf(','));

				if(selectedValues == ""){

					alert("你没有选择不论什么选项。！。");

				}else{

					alert("你选中的值为：" + selectedValues);

				}

			}

		</script>

	</head>

	<body>

		<center style="margin-top:12%"><font color="red" size="5"><b>select标签multiple属性的用法</b></font></center>

		<br/>

		<table border="1" cellspacing="0" align="center">

			<tr>

				<td align="center" width="150px">未选择</td>

				<td align="center" width="150px">操作</td>

				<td align="center" width="150px">已选择</td>

			</tr>

			<tr>

				<td align="center" width="150px">

					<select id="leftSelect" name="leftSelect" multiple="multiple" size="15" style="width:100%; height:100%;">

						<option value="0fc09295-ed4d-4e79-9c11-2f0913b421a6" title="沙枣">沙枣</option>

						<option value="1cb5eccc-faa3-44df-ba62-bb5fcdf29036" title="脐橙">脐橙</option>

						<option value="26e545ae-3647-45aa-8b9f-cef6a8d8c454" title="芒果">芒果</option>

						<option value="2788bd4d-53c2-4571-a562-b8c47e058ff4" title="枇杷">枇杷</option>

						<option value="2ab7393a-7478-4451-bb63-e8a91dc63adb" title="金桔">金桔</option>

						<option value="51160f28-44ab-419d-948c-16ba1370613a" title="青梅">青梅</option>

						<option value="baa4df9c-e6f9-4d4d-bfb8-648394942170" title="毛桃">毛桃</option>

						<option value="43a0912c-ba1b-4700-8616-31f701098b0a" title="酸橙">酸橙</option>

						<option value="37a76cf1-0b11-411a-8ce3-bb37383951c4" title="海棠">海棠</option>

						<option value="78a49dc8-3920-47ff-9a3e-b6e31d337d67" title="槟榔">槟榔</option>

						<option value="26852cb9-3cde-4b50-bf52-0ad838822665" title="杨桃">杨桃</option>

						<option value="a52b4681-2c1b-4520-ab8a-6507b52c2105" title="樱桃">樱桃</option>

						<option value="8d3d65f7-5252-4f47-9c9a-960367b06ba7" title="芭乐">芭乐</option>

						<option value="7b361600-7c77-44a5-8e03-c043ebddc710" title="鳄梨">鳄梨</option>

						<option value="5c2f062b-3fd2-44c1-a8e2-0546454978d9" title="西柚">西柚</option>

					</select>

				</td>

				<td align="center" width="150px">

					<input type="button" onclick="moveOptions('leftSelect', 'rightSelect', true, false);" value="加入 >>" style="text-align:center; margin-bottom:10px; width:90px;"/>

					<br/>

					<input type="button" onclick="moveOptions('rightSelect', 'leftSelect', false, false);" value="删除 <<" style="text-align:center; margin-bottom:10px; width:90px;"/>

					<br/>

					<input type="button" onclick="moveOptions('leftSelect', 'rightSelect', true, true);" value="所有加入 >>" style="margin-bottom:10px; width:90px;"/>

					<br/>

					<input type="button" onclick="moveOptions('rightSelect', 'leftSelect', false, true);" value="所有删除 <<" style="margin-bottom:10px; width:90px;"/>

					<br/>

				</td>

				<td align="center" width="150px">

					<select id="rightSelect" name="rightSelect" multiple="multiple" size="15" style="width:100%; height:100%;">

						<option value="07c9907f-bfb1-4e37-98e6-02224834ef76" title="荸荠">荸荠</option>

						<option value="4e1c083f-c988-48b9-9a48-ff7dbe07e51f" title="胡桃">胡桃</option>

						<option value="0e685a36-ddd1-4288-b741-8624e4384b58" title="杨梅">杨梅</option>

					</select>

				</td>

			</tr>

		</table>

		<br/>

		<center><input type="button" value="获取选项的value值" onclick="getSelectedValues();"/></center>

	</body>

</html>

对照代码1和代码2：

两段代码实现的效果是一样的，唯一的差别在于代码2中为每一个option标签加入了title属性——主要为了应对option选项长度超过select宽度时能为用户提供更好的用户体验。

select标签multiple属性的用法的更多相关文章

  1. 工作总结 2018 - 4 - 13 select标签 multiple 属性 同时选择多个选项

    <div class="col-xs-4"> @Html.DropDownList("CustomerType", (MultiSelectList ...

  2. 一个休假申请页对input标签各种属性的用法案例（手机端）

    <%@ page language="java" import="java.util.*" contentType="text/html; ch ...

  3. [刘阳Java]_MyBatis_映射文件的select标签入门_第3讲

    1.Mybatis映射文件的<select>标签主要帮助我们完成SQL语句查询功能,<select>标签它包含了很多属性,下面简单对<select>标签的属性做一个 ...

  4. 前端 HTML form表单标签 select标签 option 下拉框

    <select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...

  5. Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法

    一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resources&g ...

  6. [转]Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法

    转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...

  7. 转:自定义控件三部曲之动画篇——alpha、scale、translate、rotate、set的xml属性及用法

    第一篇: 一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resour ...

  8. 自定义控件三部曲之动画篇（一）——alpha、scale、translate、rotate、set的xml属性及用法

    前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌,当最后把手机号留给他们以便随 ...

  9. vue.js中的表单radio,select,textarea的v-model属性的用法

    只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值. section1--input:type="text" type=" ...

随机推荐

  1. Postfix telnet www.azengna.com 25 Connection Refused 但是localhost连接成功

    修改配置文件 vi /etc/postfix/main.cf 原先配置信息 .... inet_interfaces = all #inet_interfaces = $myhostname,loca ...

  2. 解决hibernate产生的id序列或者setXX不能同步到数据库到问题（this.hibernateTemplate.flush();hibernateTemplate.getSessionFactory().getCurrentSession().connection().commit()）

    通过WarehouseInventoryPreLog warehouseInventoryPreLog = new WarehouseInventoryPreLog();产生一个id序列 如果不flu ...

  3. LeetCode刷题笔记-递归-路径总和

    题目描述: 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标和 su ...

  4. AI学习笔记（01）

    [1]在Ai中,每个对象有两个属性:填充颜色和描边颜色.   [2]在AI中,非要选中,才操作.而PS中,选中图层即可.   [3]AI中,都是路径.   [4]选择工具是选中整个路径,而直接选择工具 ...

  5. Android记录2013年10月20日

    1. ailed to fectch URl https://dl-ssl.google.com/android/repository/addons_list.xml, reason: Connect ...

  6. Flask--init和run启动研究---xunfeng巡风实例篇

    第一: 首先在view目录下的__init__.py文件定义好 (1) Flask实例 : app = Flask(__name__) (2) 数据库实例 Mongo = Conn.MongoDB(a ...

  7. [luoguP2015] 二叉苹果树（DP）

    传送门 貌似是个树形背包... 好像吧.. f[i][j]表示节点i选条边的最优解 #include <cstdio> #include <cstring> #include ...

  8. 介绍 JSON的

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...

  9. iOS 如何查看崩溃日志

    参考网址: [转载]https://www.jianshu.com/p/4de55d73c82b [转载]https://blog.csdn.net/qq_26544491/article/detai ...

  10. Borg Maze-POJ3026(bfs+最小生成树)

    http://poj.org/problem?id=3026 如果一个一个普通搜处理不好的话会超时  可以连到一块搜 我觉得这个方法特别好 #include<stdio.h> #inclu ...