zyz
- 浏览: 25077 次
- 性别:
- 来自: 上海
-
最新评论
<html>
<head>
<title>js操作select实例</title>
</head>
<script>
/*主要介绍js动态操作select各种方法，也可以实现左右分栏的功能*/
/
function removeItem(sel_source)
{
var selobj=document.getElementById("yixuan");
var i=0;
var length = selobj.options.length;
while(i<length)
{
var op = selobj.options[i];
var index =op.index;
alert(op.innerHTML)
if(op.selected)
{
//document.getElementById("yixuan").options.remove(index);
//op.remove();
i--;
}
i++;
length = selobj.options.length;
}
}
/*添加option属性*/
function add()
{
var selobj=document.getElementById("yixuan");
var varItem = new Option("123","yierdan"); /*显示值、真实值*/
selobj.options.add(varItem);
}
/*清空select中的数据*/
function qingkong()
{
var selobj=document.getElementById("yixuan");
selobj.options.length=0;
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="add()">
<input type="button" value="移除" onclick="removeItem(yixuan)">
<input type="button" value="清空" onclick="qingkong(yixuan)">
<select name="yixuan" id="yixuan" multiple style="width:300;height:600">
<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>
</select>
</body>
</html>
<head>
<title>js操作select实例</title>
</head>
<script>
/*主要介绍js动态操作select各种方法，也可以实现左右分栏的功能*/
/
function removeItem(sel_source)
{
var selobj=document.getElementById("yixuan");
var i=0;
var length = selobj.options.length;
while(i<length)
{
var op = selobj.options[i];
var index =op.index;
alert(op.innerHTML)
if(op.selected)
{
//document.getElementById("yixuan").options.remove(index);
//op.remove();
i--;
}
i++;
length = selobj.options.length;
}
}
/*添加option属性*/
function add()
{
var selobj=document.getElementById("yixuan");
var varItem = new Option("123","yierdan"); /*显示值、真实值*/
selobj.options.add(varItem);
}
/*清空select中的数据*/
function qingkong()
{
var selobj=document.getElementById("yixuan");
selobj.options.length=0;
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="add()">
<input type="button" value="移除" onclick="removeItem(yixuan)">
<input type="button" value="清空" onclick="qingkong(yixuan)">
<select name="yixuan" id="yixuan" multiple style="width:300;height:600">
<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>
</select>
</body>
</html>
分享到：
发表评论
-
monit
2015-07-19 15:51 0http://blog.csdn.net/coolboylai ... -
monit linux监控
2015-07-19 14:03 338English | VPS常用软件下载 ... -
JAVA 持久层三种查询方式
2015-01-04 09:56 422Java JPA有三种查询方式： 1）JPQL 2）Crite ... -
apache2.2设置最大连接数
2014-09-09 10:39 816Apache的最大连接数，默认为256个。 修改ap ... -
linux启动oracle
2014-06-18 12:59 390http://www.360doc.com/content/1 ... -
linux下升级openssh
2013-10-22 19:27 1517查询是否安装telnet # rpm -qa | grep ... -
javascript:history.go()和History.back()的区别
2013-10-09 16:13 695javascript:history.go()和History ... -
struts2中各个jar包的作用
2013-09-13 09:19 650struts2 jar包说明 commons-logging- ... -
js实现javaMap对象
2013-08-22 08:38 546<script> /*js实现map功能*/ f ... -
input中的事件及方法
2013-07-18 16:50 0input text 的事件及方法 ... -
js循环删除表格
2013-06-07 10:37 717由于表格的总条数会随着表格的删除动态改变，因此不能使用传统的f ... -
web.xm文件的作用
2013-03-18 12:11 828web工程中的web.xml文件有 ... -
myeclipse修改cvs链接地址
2013-02-18 10:23 2260由于服务器IP的地址的变更，在eclipse中要进行更改仓库的 ... -
模态窗口使用介绍
2013-01-06 15:46 598打开模态窗口 window.showModalDialog(u ... -
js操作表格的方法介绍
2012-12-07 13:44 974在web开发中使用js动态生成表格的情况非常普遍，现对常用的方 ... -
js设置DIV属性
2012-12-05 08:42 693//控制内容 function settex ... -
document.getElementsByTagName()方法摘要
2012-09-07 18:01 657document.getElementsByTagName() ... -
设计select语句时影响效率查询的15个情况
2012-08-27 16:20 845没有创建索引，或者没有正确使用索引； 存在死锁的情况，从而导 ... -
web.xml配置文件详解
2011-12-26 11:15 6051 定义头和根元素 ... -
struts2文件上传最大值配置
2011-12-02 16:58 655使用Struts2的文件上传控 ...
相关推荐
### JavaScript操作select大全 在网页开发中，`<select>`元素是用于创建下拉列表的常用HTML标签之一。本文档提供了详细的JavaScript操作`<select>`元素的方法，包括判断选项是否被选中、增删改选项及其属性等实用...
根据给定的信息，本文将对JavaScript操作`<select>`元素的方法进行详细介绍，这些方法涵盖了创建、选择、删除选项等操作。 ### 1. 检查`<select>`元素是否存在值为`paraValue`的项 ```javascript function ...
### JavaScript 操作 Select 下拉框的关键知识点 在 Web 开发中，`<select>` 元素用于创建下拉列表（或选择框）。这些选择框在用户界面中非常常见，可以用来收集用户输入的信息，比如让用户从一系列选项中选择一个...
### JavaScript操作表单Select元素的常用步骤 在Web开发中，`<select>`标签用于创建一个下拉列表供用户选择选项。使用JavaScript可以方便地控制这些下拉列表的行为，例如添加、删除或修改选项等。下面详细介绍如何...
这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。以下是关于这个主题的一些关键知识点： 1. **DOM操作**：在JavaScript中，我们可以使用DOM（Document ...
以上是JavaScript操作`<select>`标签的一些基本方法。在实际开发中，这些功能可能会作为更复杂交互的基础，例如动态加载数据、响应用户事件等。了解并熟练掌握这些操作，对于提升网页的交互性和用户体验至关重要。
在JavaScript中，对HTML元素`<select>`进行操作是网页动态交互的重要部分。这个标签用于创建下拉列表，可以通过JS来实现对下拉列表的选择、添加、删除和更新等操作。以下是对标题和描述中提到的JavaScript控制`...
### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时，经常需要检测用户是否已选择了某个 `<select>` 元素中的 `<option>` 项。以下是一个简单的示例来实现这一功能： ```javascript ...
除了上述基本操作外，还有一些其他与Select相关的JavaScript操作，如： - **获取选中项的值**：可以通过`selTarget.options[selTarget.selectedIndex].value`获取当前选中的Option的值。 - **设置选中项**：使用`...
在JavaScript编程中，动态生成`select`元素中的`option`是一项常见的需求，特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，同时结合提供的`autoSelect.html`和`autoselect.txt`...
本文将深入探讨如何使用JavaScript来操作Select及其内部的Option。 1. **动态创建 Select** 使用`document.createElement("select")`可以创建一个新的`<select>`元素。接着通过`id`属性设置其唯一标识，并用`...
在提供的压缩包文件中，有三个关于JQuery操作`select`的HTML文档：`JQuery操作select下拉列表框.htm`、`JQuery操作select下拉列表框2.htm`、`jQuery对select操作.html`。这些文档可能包含了更多关于如何利用JQuery...
在HTML和JavaScript编程中，`<select>`元素用于创建下拉列表，经常需要进行动态操作，比如添加、删除、修改选项，以及选中和清空选中的值。本篇文章将探讨如何通过JavaScript来实现这些功能，并判断控件是否存在。...
在JavaScript中操作`<select>`控件是网页开发中常见的需求，涉及到增、删、查、改等操作。本文将详细介绍如何使用JavaScript对`<select>`控件进行各种操作，包括新增选项、修改选项、删除选项、选中特定选项、清空...
在这篇文章中，作者详细解析了使用JavaScript操作DOM对象中select元素的方法。首先，介绍了一个基础的HTML结构，即包含三个option选项的select元素。这三个选项分别代表“北京大学”、“清华大学”和“北京电影学院...
在JavaScript编程中，"js select多级联动"是一种常见的交互设计技术，主要用于创建具有层级关系的下拉选择框。这种技术常用于展示如地区选择、组织结构或产品分类等具有层次结构的数据。在这个场景中，当用户在第一...
综上所述，EL、JSTL和JavaScript共同为`<select>`元素提供了强大的功能，使得在Web应用中构建动态、交互式的下拉菜单成为可能。开发者可以根据需求灵活选择使用这些技术来优化用户体验。在实际项目中，常常会结合...
#### Select对象 Select对象表示HTML中的下拉列表，具有以下属性和方法： - `name`：获取下拉列表的名称。 - `length`：获取下拉列表中选项的数量。 - `selectedIndex`：获取当前选中项的索引。 - `options`：表示...
#### JavaScript 操作 Select 对象 1. **使用 `selectedIndex` 属性**： - `selectedIndex` 表示当前被选中的选项的索引号。 - 当下拉框可多选时，`selectedIndex` 返回第一个被选中的索引。 - 设置某个选项为...