`
wandejun1012
  • 浏览: 2736979 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

转:JavaScript Select操作详解

阅读更多

1 检测是否有选中
if(objSelect.selectedIndex > -1) {
//说明选中
} else {
//说明没有选中
}

2.动态创建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

3.添加选项option
function addOption(){
//根据id查找对象,
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值"));
}

4.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}

5.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

6.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;

7.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

8.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

9.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

分享到:
评论

相关推荐

    javascript_select_option_操作详解.txt

    ### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时,经常需要检测用户是否已选择了某个 `<select>` 元素中的 `<option>` 项。以下是一个简单的示例来实现这一功能: ```javascript ...

    javascript操作数据库详解

    - **执行SQL语句**:连接建立后,可以通过`query()`方法执行SQL查询,包括选择数据(SELECT)、插入数据(INSERT)、更新数据(UPDATE)和删除数据(DELETE)等操作。 - **结果处理**:查询结果会通过回调函数返回...

    JavaScript模拟select

    ### JavaScript模拟select控件知识点详解 #### 一、引言 在前端开发中,有时我们需要对浏览器原生的`<select>`元素进行定制化处理,比如实现更丰富的样式或者增加额外的功能。本篇将深入探讨如何使用纯JavaScript...

    下拉框、下拉控件之Select2内含css和js

    **下拉框与下拉控件:Select2详解** 在网页设计中,下拉框(Dropdown)是一种常见的用户界面元素,用于提供多个选项供用户选择。然而,原生的HTML `<select>` 标签功能相对有限,样式单一,无法满足现代网页设计的...

    JavaScript常用对象详解

    ### JavaScript常用对象详解 在深入探讨JavaScript的常用对象之前,我们先来理解一下JavaScript作为一种脚本语言,在网页开发中的核心作用。JavaScript使网页具备了动态交互能力,它可以通过操作页面对象和执行各种...

    JavaScript 多级联动select

    ### JavaScript 多级联动 Select 实现详解 在前端开发中,多级联动 Select 是一个常见的需求,尤其是在处理地区选择、分类导航等场景时。本文将深入解析如何利用原生 JavaScript 实现多级联动 Select,包括其核心...

    javascript常用操作技巧

    ### JavaScript 常用操作技巧详解 在前端开发领域,JavaScript 是一门不可或缺的语言,它能够帮助开发者实现多种功能,从而提升用户体验。本文将基于提供的文件信息,深入解析一系列JavaScript常用操作技巧及其应用...

    下拉组件select2 4.0版本js&css;

    **下拉组件Select2 4.0版本:JS与CSS详解** Select2是一款高度可定制的下拉选择组件,广泛应用于网页开发中,为传统的HTML `<select>` 元素提供了强大的功能扩展。在4.0版本中,Select2进一步提升了用户体验,增强...

    jquery操作select大全

    ### jQuery操作Select大全知识点详解 #### 1. 概述 jQuery操作Select大全主要包含了一系列使用jQuery操作select下拉列表的方法和实例。在Web开发过程中,动态地与select元素进行交互是常见的需求,jQuery为此提供...

    js之Select用法

    2. **通过JavaScript操作`select`元素** - 获取`select`元素:可以使用`document.getElementById('mySelect')`或`document.querySelector('#mySelect')`来获取`select`元素。 - 添加/删除选项: - 添加选项:`...

    select2+jquery

    2. `select2.min.js`:这是Select2的核心JavaScript文件,包含所有Select2的功能,已经过压缩优化,提高了加载速度。 3. `jquery-1.9.1.min.js`:这是jQuery库的1.9.1版本的最小化文件,它是Select2运行所依赖的基础...

    jquery select2组件

    **jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选...

    Js操作Select大全(取值、设置选中等等)

    ### Js操作Select大全知识点详解 #### 一、概述 JavaScript(简称JS)是网页开发中不可或缺的一部分,尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`<select>`...

    jquery插件-select2

    **jQuery插件Select2详解** Select2是一款基于jQuery的下拉选择框插件,它极大地扩展了原生HTML `<select>` 元素的功能,提供了更丰富的用户体验和更强的可定制性。这款插件广泛应用于网页开发中,尤其适用于需要...

    select2 动态下拉框插件以及开发心得

    **select2 插件详解** select2 是一款强大的、高度可定制的下拉选择框增强插件,适用于jQuery。它提供了一系列丰富的功能,如搜索过滤、多选、无限滚动等,使得原本简单的HTML `<select>` 元素变得更为灵活和功能...

    select2ztree.zip

    《基于Select2与jQuery-ZTree实现的树形下拉框详解》 在现代网页开发中,用户界面的设计和交互体验愈发重要。一个优秀的界面能够提升用户的操作效率,增强产品的吸引力。今天,我们将深入探讨如何利用Select2和...

    select2 搜索下拉框插件

    **描述详解:** 1. **美化下拉框**:select2 的主要目标是改善原始HTML `<select>` 元素的视觉效果,使其看起来更加美观,适应现代网页设计的需求。它可以自定义样式,提供多种主题,与网站的其他元素保持一致的...

    Select2的插件下载.zip

    **Select2插件详解** Select2是一款非常流行的JavaScript库,基于jQuery设计,它的主要目标是为HTML中的`<select>`元素提供一个强大的替代方案。在网页开发中,原生的`<select>`元素功能有限,样式单一,而Select2...

    select2插件相关资源.zip

    **Select2插件详解** Select2是一款功能强大的jQuery选择器插件,它极大地改进了HTML `<select>` 元素的用户体验。这个插件提供了一种更美观、更易用的方式来处理下拉选择列表,支持搜索、多选和自定义数据源等功能...

Global site tag (gtag.js) - Google Analytics