实现功能:
1.左边的下拉框内容添加到右边的下拉框,支持多选移动,且同时将右边的下拉框对象移除;
2.支持列表中项目上下位置的移动;
3.效果图如下:
<HTML>
<HEAD>
<TITLE>选择下拉菜单</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="Power by hill">
</HEAD>
<BODY>
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width="40%">
<select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="山东">山东</option>
<option value="安徽">安徽</option>
<option value="重庆">重庆</option>
<option value="福建">福建</option>
<option value="甘肃">甘肃</option>
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="贵州">贵州</option>
<option value="海南">海南</option>
<option value="河北">河北</option>
<option value="黑龙江">黑龙江</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/>
<br/>
<input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)">
</td>
<td width="40%">
<select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
<td>
<button onclick="changepos(list2,-1)" type="button">上移</button>
<br/>
<button onclick="changepos(list2,1)" type="button">下移</button>
</td>
</tr>
</table>
值:<input type="text" name="city" size="40">
</form>
<script language="JavaScript">
<!--
function moveOption(e1, e2){
try{
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i=i-1
}
}
document.myform.city.value=getvalue(document.myform.list2);
}
catch(e){}
}
function getvalue(geto){
var allvalue = "";
for(var i=0;i<geto.options.length;i++){
allvalue +=geto.options[i].value + ",";
}
return allvalue;
}
function changepos(obj,index)
{
if(index==-1){
if (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
}
}
else if(index==1){
if (obj.selectedIndex<obj.options.length-1){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))
}
}
}
//-->
</script>
</BODY>
</HTML>
- 大小: 9.1 KB
分享到:
相关推荐
移动开发的初学者小白树懒记录每天的学习生活,学习web开发中的JavaScript的高级部分。
主要介绍了JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)的相关资料,需要的朋友可以参考下
移动开发初学者小白树懒学习web中的JavaScript的学习笔记...
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
react-native 调用android原生模块-Toast 学习笔记
Window对象 window对象表示整个浏览器窗口,window还可用于移动或调整它表示的浏览器的大小。 一、窗口操作 window.moveBy(dx,dy) 把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素。dx值为负数,向左...
Javascript第4版学习笔记 本书从 JavaScript 的起源开始,逐步讲解到新出现的技术,其中重点介绍 ECMAScript 和 DOM 标准。在 此基础上,接下来的各章揭示了 JavaScript 的基本概念,包括类、期约、迭代器、代理...
本文实例讲述了微信小程序学习笔记之登录API与获取用户信息操作。分享给大家供大家参考,具体如下: 前面介绍了微信小程序跳转页面、传递参数获得数据,这里来分析一下登录API与获取用户信息操作方法。 【小程序...
{5.2.1}将浮点数四舍五入到指定精度}{98}{subsection.5.2.1} {6}Exception}{99}{chapter.6} {6.1}\ttfamily try-catch}{99}{section.6.1} {6.2}\ttfamily finally}{100}{section.6.2} {6.3}\ttfamily throws}{...
本文实例讲述了微信小程序学习笔记之目录结构、基本配置。分享给大家供大家参考,具体如下: 结束了一段时间的学习,开始一段新的学习旅程 —— 微信小程序。现在出去找工作只会PHP、HTML+CSS、JS什么的不够了,...
Overload [java] 方法的重载(不同参数列表的同名方法) [,әuvә'lәud] Override [java] 方法的覆盖(覆盖父类的方法) [,әuvә'raid] polymiorphism[java] 多态 (polymorphism 多形性[,pɒli'mɒ:fizm]) ...
我的学习笔记我的个人学习笔记集,包括各种课程,教程,文章或讲座。前端HTML,CSS,Sass JavaScript 解决freeCodeCamp和HackerRank挑战JavaScript算法 React体验一下React:构建您的第一个ToDo应用并将其托管在...
编程学习笔记 通过本地 Typora 编辑器,然后同步到 Github Python 系列 Python 学习笔记 Python 爬虫笔记 Python 数据分析 Python 其他模块 Python Django 移动自动化系列 Appium Airtest 前端系列 HTML CSS ...
#ionic学习笔记 (ionic中文版教程) ##ionic 概述 ionic是一个强大的混合式/hybrid app移动开发框架。可以帮助您使用 Web 技术,比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。目前已发布正式版本。...
这个文档包含了HTML/css的一些基础,还有JavaScript中的基础语法、DOM、BOM还有一些学习js中面向对象、和移动web开发、AJAX、jQuery的一些总结,还有些Web前端与移动开发面试宝典; 6、什么是事件冒泡/捕获? 事件...
前端学习笔记HTMLCSSJavaScriptECMAScriptWeb APIIndexedDBWebWorkerWebSocketVueVue 学习基础Vue 框架原理Vue 最佳实践VuexReactReact 基础React HooksTypeScriptTypeScript 基础浏览器BrowserDOMEventTarget微信...
学习笔记专案餐厅评论应用:第3阶段 配套课程 第1部分-构建可访问和响应式Web应用程序响应式网页设计基础响应式图像网络可访问性 第2部分-构建具有离线功能的Web应用程序异步JavaScript请求ES6 JavaScript改进脱机...
helloworld.js Page({}) helloworld.json {“name”:”keny123″} helloworld.wxss 定义字体 view { width: 100%; height: 100rpx; text-align: center; } helloworld.wxml Hello 大成! app.js App({}) app....
MyCNBlogs WP_CNBlogs: :see-no-evil_monkey: :frog: :panda: :horse_face: :spouting_whale: 程序猿学习资料集邮(Program ape learning materials) 编程学习中经常要访问一些...移动开发(Mobile development)