huweiyi
- 浏览: 81132 次
- 性别:
- 来自: 重庆
-
文章分类
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
/* 增加选中的部分 */
function add() {
var firstNode = document.getElementById("first");
var second = document.getElementById("second");
var options = firstNode.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
var optionElement = options[i];
if (optionElement.selected) {
//alert(optionElement.value + " "+ optionElement.text);
//创建标签
var element = document.createElement("<option>");
//设置属性
element.setAttribute("value", optionElement.value);
//创建文本
var optionText = document.createTextNode(optionElement.text);
//追加文本
element.appendChild(optionText);
//增加option选项
second.appendChild(element);
//移除第一个下拉列表中的选项
optionElement.parentNode.removeChild(optionElement);
}
}
}
/*增加全部*/
function add_all() {
var firstNode = document.getElementById("first");
var second = document.getElementById("second");
var options = firstNode.getElementsByTagName("option");
var optionSize = options.length;
for (var i = 0; i < optionSize; i++) {
var optionElement = options[0];
//alert(optionElement.value + " "+ optionElement.text + " i"+ i);
//创建标签
var element = document.createElement("<option>");
//设置属性
element.setAttribute("value", optionElement.value);
//创建文本
var optionText = document.createTextNode(optionElement.text);
//追加文本
element.appendChild(optionText);
//增加option选项
second.appendChild(element);
//移除第一个下拉列表中的选项（注意这里删除的是option[0]）
optionElement.parentNode.removeChild(options[0]);
}
}
/* 移除选中的部分 */
function remove() {
}
/* 移除全部 */
function remove_all() {
}
function change(){
var first = document.getElementById("first");
var second = document.getElementById("second");
second.appendChild(this[this.selectedIndex]);
}
</script>
</head>
<body>
<table align="center">
<tr>
<td id="1"> <!-- multiple设置能否同时选中多个 size设置下拉列表的长度-->
<select name="first" size="10" multiple="multiple" id="first" class="td3" ondblclick="change()">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
<td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" onclick="add();"/>
<input name="add_all" id="add_all" type="button" class="button" value="==>" onclick="add_all();"/>
<input name="remove" id="remove" type="button" class="button" value="<--" onclick="remove();"/>
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" onclick="remove_all();"/>
</td>
<td> <!-- multiple设置能否同时选中多个 size设置下拉列表的长度-->
<select name="second" size="10" multiple="multiple" id="second" class="td3">
<option value="选项10">选项10</option>
</select>
<td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
/* 增加选中的部分 */
function add() {
var firstNode = document.getElementById("first");
var second = document.getElementById("second");
var options = firstNode.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
var optionElement = options[i];
if (optionElement.selected) {
//alert(optionElement.value + " "+ optionElement.text);
//创建标签
var element = document.createElement("<option>");
//设置属性
element.setAttribute("value", optionElement.value);
//创建文本
var optionText = document.createTextNode(optionElement.text);
//追加文本
element.appendChild(optionText);
//增加option选项
second.appendChild(element);
//移除第一个下拉列表中的选项
optionElement.parentNode.removeChild(optionElement);
}
}
}
/*增加全部*/
function add_all() {
var firstNode = document.getElementById("first");
var second = document.getElementById("second");
var options = firstNode.getElementsByTagName("option");
var optionSize = options.length;
for (var i = 0; i < optionSize; i++) {
var optionElement = options[0];
//alert(optionElement.value + " "+ optionElement.text + " i"+ i);
//创建标签
var element = document.createElement("<option>");
//设置属性
element.setAttribute("value", optionElement.value);
//创建文本
var optionText = document.createTextNode(optionElement.text);
//追加文本
element.appendChild(optionText);
//增加option选项
second.appendChild(element);
//移除第一个下拉列表中的选项（注意这里删除的是option[0]）
optionElement.parentNode.removeChild(options[0]);
}
}
/* 移除选中的部分 */
function remove() {
}
/* 移除全部 */
function remove_all() {
}
function change(){
var first = document.getElementById("first");
var second = document.getElementById("second");
second.appendChild(this[this.selectedIndex]);
}
</script>
</head>
<body>
<table align="center">
<tr>
<td id="1"> <!-- multiple设置能否同时选中多个 size设置下拉列表的长度-->
<select name="first" size="10" multiple="multiple" id="first" class="td3" ondblclick="change()">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
<td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" onclick="add();"/>
<input name="add_all" id="add_all" type="button" class="button" value="==>" onclick="add_all();"/>
<input name="remove" id="remove" type="button" class="button" value="<--" onclick="remove();"/>
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" onclick="remove_all();"/>
</td>
<td> <!-- multiple设置能否同时选中多个 size设置下拉列表的长度-->
<select name="second" size="10" multiple="multiple" id="second" class="td3">
<option value="选项10">选项10</option>
</select>
<td>
</tr>
</table>
</body>
</html>
分享到：
发表评论
-
ajax跨域
2016-05-03 13:53 329由于最近在一个小项目需要把页面和后台分开， ... -
js操作数据
2015-09-25 14:40 482处理数组的方法很多，javascript splice()算是 ... -
js中(function(){})()说明
2015-09-25 11:59 344js中自执行匿名函数 格式：(function() {//co ... -
js的Prototype属性 解释及常用方法
2015-09-25 11:44 409函数：原型每一个构造函数都有一个属性叫做原型(prototy ... -
js精品
2015-03-20 13:04 01. oncontextmenu="window.e ... -
js全套函数
2014-09-17 11:54 4051.document.write(""); ... -
javascript中正则表达式
2014-08-08 10:52 440正则表达式语法： 正则表达式重复： 选择、分组 ... -
javascript中call
2014-08-01 16:33 516[b]Person类对象转换（我觉得是种实例化对象后， 继承的 ... -
javascript中prototype
2014-07-23 10:42 442用过JavaScript的同学们肯定都对prototype如雷 ... -
javascript中data用法
2014-01-13 11:24 571var d = new Date();//Date对象需要创建 ... -
js完成跑马灯程序
2014-02-08 16:56 641<!Doctype html> <html& ... -
动态添加表格和删除表格(复制粘贴就可以运行)
2014-02-08 16:57 623<!DOCTYPE html PUBLIC " ... -
动态添加select选项
2013-12-26 15:58 510<!DOCTYPE html PUBLIC " ... -
js判断两个日期的大小和判断输入框的值是否为空
2013-12-26 15:40 924/*******************js判断日期的大小** ... -
js中setInterval与setTimeout用法
2013-12-23 13:42 389setTimeout 定义和用 ... -
正则表达式
2013-09-16 11:36 461匹配中文字符的正则表达式： [u4e00-u9fa5] 评注 ... -
showModalDialog
2013-07-12 11:29 349JS中showModalDialog 详细使用 基本介绍： ... -
javascipt 总结
2013-07-10 21:36 446typeof（）： 是判断数据的类型，例如：alert（typ ...
相关推荐
两个下拉列表数据左右移动.(按“SHIFT、CTRL”可以多选项移动)
利用js完成两个下拉列表中元素的移动,而且可以实现自身下拉列表元素的上下移动！
ztree实现左右两棵树的节点移动，左边移动到右边，在右边树上添加节点，左边树上删除节点，右移左，逻辑一致
两个下拉列表的内容相互对应，使主菜单对应其子菜单。
servlet+ajax做的两个下拉列表联动（数据从数据库查出后显示到HTML上）
图片从左到右、从右到左两个方向的滚动效果
接在P0口的8个LED从左到右循环依次点亮，产生走马灯效果
仿美团外卖两个ListView联动,左边点击切换右边,右边滑动切换左边. 并且右边伴有标题的切换
双listview显示，左边listview点击显示右边listview ，代码简单，仅供参考
Jquery实现数据左右移动Demo，供大家一起共同分享学习。
这个是一个拉列列表的二级联动代码，大家可以参照一下
此代码可实现产品列表的左右切换功能，将幻灯片移到产品展示效果上，不得不说是一次小小的创意
所谓赋值是从数据库中获取数据循环遍历赋值给前端下拉列表选项，所谓回显是从选中或勾选父页面中的某行数据，回显到子页面中对应的下拉列表，且处于被选中状态。两个功能均已给出（给出的是前端代码，后端接口很简单...
实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单： 将匹配的内容放在一个div中，input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题： input的onblur中隐藏...
附件中使用两种方式实现了带有复选框功能的下拉列表，一种是用DIV控制，一种是用jquery
在QTableView 中添加Combo控件，实现列表中的下拉选择控件，在Qt中Demo有了编辑框和spin的列表控件，我在demo中...整个工程在4.8.5下运行验证，如更高版本不兼容，可只拷贝上述两个文件试试，再不行可直接给我留言。
两款下拉列表控件，鼠标移至菜单上，动画显示出下拉列表
左边产品大类，选择某一类后在右边展开其中的小类，用两个listview联动实现
点击按钮左右滚动图 就是一排图左右各两个按钮点击左边图向左走，点击右按钮图向右走
日期下拉列表，年月日分开的！！简单来说就是两个数字之间的下拉列表