<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript强化训练－－下拉列表的操作01</title>
<script language="JavaScript" type="text/javascript">
//移动下拉框被选中选项
//fromSelId :源下拉框id
//toSelId :目标下拉框id
function moveOption(fromSelId,toSelId){
var fromSel = document.getElementById(fromSelId);
var toSel = document.getElementById(toSelId);
if(fromSel==null||toSel==null){
return false;
}
for(var i = 0;i < fromSel.options.length;i++){
var _option = fromSel.options[i];
//是否选中
if(_option.selected){
//往目标下拉框加添加选项
toSel.appendChild(_option);
i--;//下标变了
}
}
}
</script>
</head>
<body bgcolor="abcdef">
<form id='demoFrm' name="demoFrm" method="post" action="" >
<table border="1" align="center" width="300">
<tr>
<td colspan="3" align="center">下拉列表操作的演示</td>
</tr>
<tr>
<td align="center" width="100">
<select multiple="multiple" size="10" id="leftSel">
<option value="1">第一个理拉框的值1</option>
<option value="2">第一个理拉框的值2</option>
<option value="3">第一个理拉框的值3</option>
<option value="4">第一个理拉框的值4</option>
</select>
</td>
<td align="center" width="100">
<input type="button" id="moveTwo" value="-->>" onclick="moveOption('leftSel','rightSel');">
<br>
<input type="button" id="moveOne" value="<<--" onclick="moveOption('rightSel','leftSel');">
</td>
<td align="center" width="100">
<select multiple="multiple" size="10" id="rightSel">
<option value="1">第二个理拉框的值1</option>
<option value="2">第二个理拉框的值2</option>
<option value="3">第二个理拉框的值3</option>
<option value="4">第二个理拉框的值4</option>
</select>
</td>
</tr>
</table>
</form>
<div id="showContent" style="font-size:30px;">
</div>
</body>
</html>
向select对象里添加option的2中常见方法
方法1：
var option = new Option(text,value);//注意参数1为文本显示值，参数为value值
selectobj.options.add(option);
方法2：
var option = document.createElement("option");
option.appendChild(document.createTextNode("text"));
option.setAttribute("value","value");
selectobj.appendChild(option );
重要属性
1 ，options（为一个Option对象数组）
2 ，selectedIndex 为选中项的索引
重要方法
1， appencChild(option)添加一个选项
2， remove(0) 0表示索引号
分享到：
相关推荐
《dropList v1.1：JavaScript无限级联动下拉列表框深度解析》 在Web开发中，用户界面的交互性和易用性至关重要。一个优秀的下拉列表框不仅可以提高用户体验，还能有效节省页面空间。今天我们将深入探讨“dropList v...
总结来说，动态加载下拉列表框是一个涉及前端和后端开发的综合技术，涵盖了异步请求、数据分页、DOM操作、状态管理、用户交互等多个方面。合理运用这一技术，可以提升应用的性能和用户体验。在实现过程中，应关注...
总结起来，实现"jQuery下拉列表框日期选择代码"涉及到以下几个主要步骤： 1. 创建HTML结构，包括一个input元素。 2. 引入jQuery库和自定义的JavaScript代码。 3. 编写jQuery插件，实现点击input显示日期时间选择器...
总结来说，"具有多选功能的下拉列表框"是一个提高用户界面交互性的设计，它可以为用户提供更加灵活的选择方式。实现这一功能可能涉及到HTML、CSS、JavaScript以及后端技术的综合运用，或者在特定的桌面应用环境中，...
总结来说，"无限级、无刷新、联动下拉列表框"是ASP.NET Web开发中一个高级特性，它结合了服务器端和客户端技术，提供了一种高效且用户体验良好的数据导航方式。掌握这种技术对于提升Web应用的用户体验和互动性具有...
本篇文章将深入探讨如何利用jQuery实现自动滚动下拉列表框这一常见的JS特效，特别是针对“选项卡TAB”的交互优化。 一、jQuery基础 jQuery是一个JavaScript库，它简化了JavaScript的DOM操作、事件处理以及动画效果...
### JavaScript操作Select下拉列表框的关键技术点 #### 一、背景与需求分析 在Web应用开发中，经常需要处理用户界面的各种交互行为。本文档介绍了一种利用JavaScript操作Select下拉列表框的方法，旨在满足特定场景...
总结来说，下拉列表框控件是Web开发中的基础元素，它们可以通过HTML、CSS和JavaScript进行定制和增强。自动完成功能则是提升用户体验的重要手段，通常利用JavaScript库如jQuery UI实现。在实际项目中，开发者需要...
树形下拉列表框通过JavaScript的动态操作和HTML的结构化设计，为用户提供了一种高效、直观的方式来处理具有层级关系的数据。通过合理利用现有的库和框架，开发者可以轻松地将这种交互式组件整合到自己的应用程序中，...
在网页设计中，动态下拉列表框...总结来说，AJAX实现的动态下拉列表框利用了异步通信的能力，提升了用户体验，使网页更加互动和高效。开发者需要掌握JavaScript、DOM操作以及服务器端编程技术，才能成功实现这一功能。
总结起来，"jQuery带搜索过滤功能的下拉列表框"是一个综合运用了HTML、CSS和JavaScript技术的实例，它展示了如何通过jQuery来增强网页的交互性和可用性。这种功能在现代网页应用中非常常见，能够极大地提升用户在...
### HTML中嵌套JS实现下拉列表功能 在本文中，我们将探讨如何使用HTML与JavaScript结合来创建一个具有动态下拉列表功能的网页。通过分析提供的代码示例，我们可以了解到如何利用JavaScript控制HTML元素的显示与隐藏...
总结来说，"纯JS炫酷下拉列表框美化插件pickout源码"涉及到的技术点主要包括JavaScript DOM操作、CSS美化、事件处理、浏览器兼容性以及插件的可配置性。通过学习和分析这个插件，开发者可以深入理解前端交互设计，并...
总结来说，"js带搜索框的下拉列表"是通过JavaScript和可能的库（如jQuery）实现的一种增强型用户界面组件。它涉及DOM操作、事件处理、数据过滤以及界面更新等多个技术环节，提升了用户在海量选项中的查找效率。在...
总结一下，"js多选下拉列表"涉及的技术主要包括HTML的`<select>`元素与`multiple`属性、JavaScript/jQuery用于交互和增强用户体验，以及可能需要的jQuery插件如`select2`和`multi-select`。对于多级联动，需要理解...
接下来，我们需要使用JavaScript来监听下拉列表的`change`事件，当用户选择一个新选项时，触发跳转操作。可以使用以下代码： ```javascript document.getElementById('dropdown').addEventListener('change', ...
二级联动的核心在于监听第一个下拉列表的`onChange`事件，当用户在第一个下拉列表中选择一个选项时，触发该事件，通过JavaScript获取当前选中的索引或值，然后根据这个信息动态地更新第二个下拉列表的选项。...
在ASP.NET开发中，"无刷新联动下拉列表框"是一种常见的交互设计，它提高了用户在网页上的操作体验。无刷新联动指的是用户在一个下拉列表框中选择一个选项后，无需重新加载整个页面，另一个相关的下拉列表框就会自动...
总结，DWR、Hibernate 和 Spring 结合使用可以方便地实现级联下拉列表框，提供流畅的用户体验。通过 DWR 实现前后端的实时通信，利用 Hibernate 进行数据操作，借助 Spring 管理业务逻辑和数据访问，从而构建出高效...
总结以上三种方法，可以灵活运用JavaScript来控制下拉列表的选中行为。无论是简单场景通过索引选择，还是复杂场景通过name或id选择，又或者通过value值选择，都可以根据具体需求及场景来决定使用哪种方法。这些方法...