`
gerrard_ok
  • 浏览: 146300 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 操作select标签

阅读更多

东西很简单,只是自己记性不好,经常忘记一些关键字   

所以发了点时间整理了一下   

/*------------------------------------------------------  

*语言:JavaScript  

*说明:select元素javascript常用操作  

* 1. 判断是否存在指定value的Item  

* 2.加入一个Item  

* 3.删除值为value的所有Item  

* 4.删除某一个index的选项  

* 5.更新第index项的value和text  

* 6.设置select中指定text的第一个Item为选中  

* 7.设置select中指定value的第一个Item为选中  

* 8.得到当前选中项的value  

* 9.得到当前选中项的index  

*  10.得到当前选中项的text  

* 11.清空所有选项  

-------------------------------------------------------*/  

obj = document.getElementsById("select");

//1.判断是否存在指定value的Item   

function ExistValue(obj,value){   

 for(var i=0;i<obj.options.length;i++){   

if(obj.options[i].value == value){   

 return true;   

}   

}        

return false;   

}   

//2.加入一个Item   

function AddItem(obj,text,value){   

var varItem = new Option(text,value);   

obj.options.add(varItem);   

}   

//3.删除值为value的所有Item   

function RemoveItems(obj,value){   

 for(var i=0;i<obj.options.length;i++){   

if(obj.options[i].value == ItemValue){   

 obj.options.remove(i);   

}   

}          

}   

//4.删除某一个index的选项   

function RemoveItem(obj,index){   

 obj.options.remove(index);   

}   

 

//5.更新第index项的value和text   

function UpdateItem(obj,index,value,text){   

obj.options[index].value = value;   

obj.options[index].text = text;   

}   

          

//6.设置select中指定text的第一个Item为选中   

function SelectItemByText(obj,text){      

var isExit = false;   

 for(var i=0;i<obj.options.length;i++){   

if(obj.options[i].text == text){   

obj.options[i].selected = true;   

return true;   

}   

}   

return false;   

    

}   

//7.设置select中指定value的第一个Item为选中   

function SelectItemByValue(obj,value){      

var isExit = false;   

for(var i=0;i<obj.options.length;i++){   

if(obj.options[i].value == value){   

obj.options[i].selected = true;   

 return true;   

}   

}   

return false;   

    

}   

//8.得到当前选中项的value,index,text   

function GetValue(obj){   

return obj.value;    

}   

//9.得到当前选中项的index   

function GetIndex(obj){   

return obj.selectedIndex;    

}   

//10.得到当前选中项的text   

function GetText(obj){   

return obj.options[obj.selectedIndex].text;   

}   

//11.清空所有选项   

function Clear(obj){   

obj.options.length = 0;    

}  

分享到:
评论

相关推荐

    JavaScript操作select大全

    ### JavaScript操作select大全 在网页开发中,`&lt;select&gt;`元素是用于创建下拉列表的常用HTML标签之一。本文档提供了详细的JavaScript操作`&lt;select&gt;`元素的方法,包括判断选项是否被选中、增删改选项及其属性等实用...

    javascript操作Select标记中options集合

    这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。以下是关于这个主题的一些关键知识点: 1. **DOM操作**:在JavaScript中,我们可以使用DOM(Document ...

    javascript 操作表单select的常用步骤

    ### JavaScript操作表单Select元素的常用步骤 在Web开发中,`&lt;select&gt;`标签用于创建一个下拉列表供用户选择选项。使用JavaScript可以方便地控制这些下拉列表的行为,例如添加、删除或修改选项等。下面详细介绍如何...

    Jquery获取Select标签的值

    本篇文章将详细介绍如何利用 jQuery 来获取 Select 标签的值以及相关的表单元素操作。 #### 一、获取 Select 标签的值 ##### 1. 获取 Select 的 Value 值 要获取 Select 下拉框的当前选中值(即 value 属性的值)...

    Jquery操作select标签例子

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对`&lt;select&gt;`标签的操作。本文将详细讲解如何使用jQuery来管理HTML中的`&lt;select&gt;`元素,包括选择、更改选项,获取选中项的文本、值...

    html最全的js javascript操作select 下拉框

    根据给定的文件标题、描述、标签以及部分内容,本文将深入解析HTML中使用JavaScript操作`&lt;select&gt;`下拉框的全面方法。`&lt;select&gt;`元素是网页表单中用于创建下拉列表的关键部分,而通过JavaScript,我们可以动态地添加...

    超好用的select标签-带api

    在本篇文章中,我们将深入探讨如何使用`&lt;select&gt;`标签,并结合JavaScript API,来实现更丰富的交互功能。我们将涵盖以下几个方面: 1. **基本使用** - `&lt;select&gt;`标签的基本结构:`&lt;select&gt;&lt;/select&gt;`,其中可以...

    javascript 操作select下拉列表框的一点小经验.docx

    ### JavaScript操作Select下拉列表框的关键技术点 #### 一、背景与需求分析 在Web应用开发中,经常需要处理用户界面的各种交互行为。本文档介绍了一种利用JavaScript操作Select下拉列表框的方法,旨在满足特定场景...

    Jquery 操作 Dom 标签 select

    ### Jquery 操作 Dom 标签 Select 在前端开发中,使用 jQuery 操作 DOM 元素是非常常见的需求之一。特别是对于表单元素如 `select`、`radio` 和 `checkbox` 的操作,更是频繁出现。下面我们将详细介绍如何使用 ...

    双选框 两个<select>标签组成 高效代码清晰

    总结起来,这个项目利用了两个`&lt;select&gt;`标签和JavaScript实现了一个双向选择的组件,具备良好的用户体验和代码质量。开发者巧妙地运用了DOM操作、事件监听以及可能的Map数据结构,实现了选项的动态移动和提交功能。...

    分享带查询的select标签

    【标题】"分享带查询的select标签"涉及的是在网页开发中如何实现一个具有搜索功能的下拉选择框。在传统的HTML中,`&lt;select&gt;`标签用于创建一个下拉列表,但其默认功能并不支持用户输入关键词进行筛选。这篇博客(博文...

    javascript获取select标签选中的值

    以上就是使用纯JavaScript获取`&lt;select&gt;`标签选中值的基本操作。接下来,我们来看看如何使用jQuery库来实现相同的功能。 jQuery是一个流行的JavaScript库,它提供了更简洁的语法来操作DOM元素。获取选中值的方式...

    jQuery获取Select标签的手册

    1. **获取Select标签的value值**: 要获取`Select`标签中当前选中的选项的`value`属性值,可以使用`$('select').val()`。例如: ```javascript var selectedValue = $('select').val(); ``` 这将返回`&lt;select&gt;`...

    动态加载select标签下拉框数据

    标题提到的“动态加载select标签下拉框数据”是指在用户交互时,根据需求动态地从服务器获取并填充HTML `&lt;select&gt;` 标签的选项,而不是一次性加载所有数据。这种技术常用于大数据量的下拉列表,以减少初始页面加载...

    JavaScript, select标签元素左右移动功能实现

    这里,我们将详细探讨如何利用JavaScript实现这样的功能,特别是在处理select标签时的操作。 首先,我们要创建一个基本的HTML结构,包含两个select元素,一个在左边,一个在右边,以及四个按钮来控制元素的移动。在...

    Js操作Select大全.doc

    以上是JavaScript操作`&lt;select&gt;`标签的一些基本方法。在实际开发中,这些功能可能会作为更复杂交互的基础,例如动态加载数据、响应用户事件等。了解并熟练掌握这些操作,对于提升网页的交互性和用户体验至关重要。

    自己开发的一个生成多级select的自定义标签

    1. **源代码文件**:如Java、JavaScript、TypeScript或任何其他支持自定义标签的语言编写的核心代码,实现多级SELECT的逻辑。 2. **HTML模板**:定义了自定义标签结构的HTML模板文件,可能是独立的文件或嵌入在源...

    javascript对select标签的控制(option选项/select)

    html中的select标签,也是asp.net中的asp:DropDownList控件。 javascript对它们的操作 一、基础理解 代码如下: var e = document.getElementById(“selectId”); e. options= new Option(“文本”,”值”) ; //创建...

    javascript获取select值的方法分析

    使用JavaScript操作select元素,不仅可以获取用户选中的值,还可以实现动态更新选项等功能。本文将详细介绍使用JavaScript如何获取select元素中的值,并提供实例分析相关的技巧。 首先,获取用户在select元素中选中...

    删除元素标签 并在之和添加一个select标签_123

    本教程将专注于如何在JavaScript中执行这些操作,特别是删除一个元素并插入`&lt;select&gt;`标签。`&lt;select&gt;`标签用于创建下拉菜单,常用于提供用户多个选项进行选择。 首先,我们需要了解如何选择和删除HTML元素。在...

Global site tag (gtag.js) - Google Analytics