<script>
function delFromLast(){
var s=document.getElementById("a");
for(var i=s.options.length;i>=0;i--){
s.remove(i);//最后结果是option全部删除，
}
}
function delFromFirst(){
var s=document.getElementById("a");
for(var i=0;i<s.options.length;i++){
s.remove(i);//最后结果是留下2.4.6三项。因为remove(0)时，原来的1会放置到0的位置,后面的也逐个前移，然后remove(1)时，其实
//是remove的2.这里跟数组的结构有关，因为数组是不允许有洞的。
}
}
var oldOptions=null;
var oldOptionReal=new Array();
function add(){
var s=document.getElementById("a");
s.options.length=0;
alert(oldOptions.length);//此时为0，所以下面不会执行。此处可以发现对象是引用对象还是值对象。在C#中，数组中一般是保存了值对象，这样看来js中也是一///样,而java中数据则还是保存的引用。当然c#中可以显式的设置要保存引用还是值。
for(var i=0;i<oldOptions.length;i++){
s.add(oldOptions[i]);
}
}
function addReal(){
var s=document.getElementById("a");
s.options.length=0;
alert(oldOptionReal.length);//此时为6，所以下面顺利的将所有option再加入到select中
for(var i=0;i<oldOptionReal.length;i++){
alert(oldOptionReal[i].text);
s.add(oldOptionReal[i],4);//注意此处有兼容问题。
/*
IE: s.add(options[i]) 在最后面加入一个options
s.add(optons[i],null) 报错
Other:
s.add(options[i],null)在最后面加入一个options
s.add(options[i],2)都是在指定index上加入一个options.如果当前select的最大index比这个值小，取最大index。
*/
}
}
</script>
</HEAD>
<BODY>
<select id="a">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<input onclick="delFromLast();" type="button"/>
<input onclick="delFromFirst();" type="button"/>
<input onclick="add();" type="button"/>
<input onclick="addReal();" type="button"/>
<script>
oldOptions=document.getElementById("a").options;
for(var i=0;i<oldOptions.length;i++){
oldOptionReal.push(oldOptions[i]);
}
</script>
分享到：
相关推荐
我们将涵盖以下几个方面： 1. **基本使用** - `<select>`标签的基本结构：`<select></select>`，其中可以包含多个`<option>`标签来定义各个选项。 - `<option>`标签的属性：`value`定义选项的值，`text`为显示的...
复制代码代码如下: document.getElementById(“selectid”).options.length = 0; 方法二 复制代码代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码代码如下: document....
JavaScript在美化select标签的过程中主要扮演了以下几个角色： 1. 隐藏原始select元素：通过JavaScript，可以将原始的select标签隐藏起来，让其不可见。这是实现自定义下拉列表效果的前提，因为只有隐藏了原生的...
实现动态加载通常包括以下几个步骤： 1. **创建HTML结构**：首先，我们需要一个基本的HTML `<select>` 标签，可能包含一些初始选项或者一个空的下拉框，用于后续的动态加载。 2. **监听事件**：使用JavaScript...
总结起来，实现两个`<select>`标签的不同内容显示和多选功能，主要涉及以下几个步骤： 1. 在HTML文件中创建`<select>`标签，并为它们定义不同的`<option>`。 2. 使用Bootstrap的`form-control`类和`multiple`属性来...
在网页开发中，`<select>` 标签用于创建下拉菜单，它是表单元素的一种，通常用于提供用户从预定义选项中选择一个或多个值。实现`<select>`的各种搜索功能，可以极大地提高用户体验，让用户能快速找到所需选项。在...
标题"select2的几种demo"指的是一个关于`select2`插件的不同展示示例。`Select2`是一个强大的JavaScript库，它能够美化和增强HTML的`<select>`元素，提供搜索、多选、无限滚动等功能，使得用户在下拉选项中进行选择...
当从后台通过JSON格式获取数据，并尝试用这些数据动态生成一个select标签以供用户选择时，可能会遇到一系列问题。这些问题可能表现为select标签不显示，或者select标签出现错误的显示效果。 出现这种问题可能有多...
下面通过几个具体的示例来更深入地理解`s:select`标签的不同应用场景。 ##### 示例1: 使用数组作为数据源 ```xml <s:select list="{'aa','bb','cc'}" theme="simple" headerKey="00" headerValue="00"/> ``` - **...
在网页设计中，`<select>`元素通常用于创建下拉列表，用户可以在其中选择一个或多个选项。然而，标准的`<select>`元素通常只支持文本内容，不直接支持显示图片。但随着网页交互性的增强，设计师们有时需要在下拉列表...
在Bootstrap中，"select复选框"通常指的是一个下拉选择列表，其中包含多个可选的选项，用户可以通过勾选这些选项来做出选择。本篇文章将深入探讨如何在Bootstrap中实现带有全选功能的select复选框，以及相关的技术...
本篇文章将详细介绍在Struts2中如何使用`s:select`标签，以及通过几个具体例子来展示其用法。 1. 第一个例子： ```jsp <s:select list="{'aa','bb','cc'}" theme="simple" headerKey="00" headerValue="00"></s:...
使用这个插件通常涉及以下几个步骤： 1. **引入库**：在HTML文档的`<head>`或`<body>`标签内，通过`<script>`标签引入jQuery库和美化插件的脚本文件。 2. **选择元素**：使用jQuery选择器找到要进行美化的`<select>`...
为了解决这个问题，开发者可以采用以下几种方法： 1. 使用jQuery bgiframe插件：该插件创建一个透明的iframe层，将被遮挡的div覆盖在select之上，从而避免遮挡问题。 2. 避免使用绝对或相对定位：改用其他布局方式，...
这个实例将涵盖Vue.js中的几个核心概念，包括组件的创建与使用、组件间的数据传递以及动态数据绑定等。 首先，我们从HTML结构开始。在示例中，有两个`my-select`组件被创建，它们分别绑定到`data1`和`data2`数据...
在重构 `element ui select` 多选组件时，我们需要考虑以下几个方面： 1. **动态标签显示**：描述中提到的“标签根据数据属性显示颜色不同”，这可能是指通过数据绑定实现标签颜色的动态变化。我们可以利用 Vue 的...
要实现这一功能，主要涉及以下几个方面： 1. select标签的基本使用：select标签内可以包含多个option标签，每个option标签代表一个选项，option标签的value属性用于指定选项的值，通常这个值是对应的网址。当用户...
要实现`<select>`，我们通常需要以下几个步骤： 1. **数据准备**：在JSP中，我们可能需要从数据库或其他数据源获取下拉列表的选项。这可以通过JavaBean或Servlet来完成，然后将数据传递到JSP页面。 2. **在JSP中...
这部分代码主要包含以下几个关键点： - 创建和初始化下拉菜单实例。 - 处理用户事件（如点击按钮展示/隐藏下拉选项）。 - 设置下拉菜单的属性（如大小、默认文本等）。 - 动态生成并填充下拉选项。 ```...
在 Bootstrap Select 插件中，有以下几个关键知识点： 1. **基本使用**：首先，你需要在项目中引入 Bootstrap CSS 和 JS 文件，以及 Bootstrap Select 的特定 CSS 和 JS 文件。然后，只需将 `class="selectpicker"`...