`

Javascript 操作select标记中options的方法

 
阅读更多

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标记中options集合

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

    javascript Select标记中options操作方法集合

    javascript操作Select标记中options集合 先来看看options集合的这几个方法: options.add(option)方法向集合里添加一项option对象; options.remove(index)方法移除options集合中的指定项; options(index)或options...

    javascript HTML操作代码

    在本例中,我们使用 JavaScript 来操作 `<select>` 元素,动态添加选项、删除选项,并实现了一个简单的分类管理系统。 创建 optgroup 元素 在 HTML 中,`<optgroup>` 元素用于将选项分组。在 JavaScript 中,我们...

    Vue.js的通用选择多选标记组件_JavaScript_HTML_下载.zip

    在您提供的资源"Vue.js的通用选择多选标记组件_JavaScript_HTML_下载.zip"中,我们可以推测包含了一个名为"vue-multiselect-master"的项目。`vue-multiselect`是Vue.js的一个插件,它提供了一个高度可定制的多选下拉...

    JavaScript宝典 js开发

    `document.forms[0].selectName.options[n].value`:获取下拉列表中指定选项的值。`n`通常是指`selectedIndex`,即用户当前选择的索引。 #### 三十、字符串操作 - 创建字符串:`var myString = new String("This ...

    百个前端设计常用Javascript语句

    `document.write()` 是一种基本的输出方法,用于在HTML文档中输出文本、HTML标记或其他JavaScript表达式的结果。例如: ```javascript document.write("Hello World!"); ``` #### 2. JS中的注释为`//` JavaScript ...

    美化select控件Jquery chosen

    2. 初始化Chosen插件,通常通过`$(".selector").chosen()`方法对`<select>`元素进行操作。 3. 根据需要配置选项,如`allow_single_deselect`、`disable_search_threshold`等。 4. 如果有动态添加或删除的选项,需要...

    107条Javascript的常用语句

    JavaScript中的单行注释使用`//`来标记。这是一种记录代码功能或用途的好方法。 ```javascript // 这是一行注释 ``` ### 3. HTML文档结构 HTML文档的基本结构为`document -> html -> (head, body)`。`document`代表...

    通过改变innerHTML的内容,动态增加选择项

    在JavaScript编程中,`innerHTML`是一个非常重要的属性,它允许我们动态地修改HTML元素的内容,包括文本、HTML标记以及它们的组合。这个特性在构建交互式网页和动态更新页面内容时非常有用。本文将深入探讨如何通过...

    下拉列表联动

    在下拉列表联动中,我们需要使用`<select>`标签来创建下拉框,并用`<option>`标签定义每个可选项。例如: ```html <select id="select1"> <option value="option1">Option 1 <option value="option2">Option 2 </...

    JavaScript blog式日历控件

    - **初始化参数**:`Calendar`类在初始化时接收两个参数——`container`(指定日历将被插入到哪个DOM元素中)和`options`(配置项)。配置项中包含了诸如年份、月份、选中的日期等关键信息。 - **属性设置**: - `...

    js中使用标签

    - **示例应用**:在`doLoad`函数中,通过`document.getElementById('dpselect')`获取了ID为`dpselect`的`<select>`元素,并使用`options.add()`方法动态添加选项。 ### 拓展知识点 #### 4. JSP中的EL表达式 - **...

    jsp实现级联菜单 jsp实现级联菜单

    ### JSP实现级联菜单详解 #### 一、概述 ...这种方法不仅适用于简单的省份-城市选择器,还可以扩展到更复杂的多级选择器中。开发者可以根据具体需求调整和优化实现细节,以满足不同应用场景的需求。

    javascript下拉框不被选中大类的区别方法

    本文介绍了如何通过 JavaScript 控制 `<select>` 元素中 `<optgroup>` 的可选性,特别是如何防止用户选择那些被标记为不可选的分组。这种方法不仅增强了用户体验,还确保了数据的一致性和有效性。通过使用简单的 ...

    js获取asp.net服务器端控件Label,TextBox,RadioButtonList,DropDownList的值

    ### js获取ASP.NET服务器端控件Label,TextBox,RadioButtonList,DropDownList的...正确地利用DOM操作方法可以有效地实现这一目标,提高应用程序的交互性和灵活性。希望本文提供的方法能够帮助开发者更好地处理这类问题。

    省市区县三级菜单下拉选

    例如,可能需要设置一个ID或class来标记包含选择器的元素,然后通过JavaScript代码调用插件,如`$("#selector").provinceCityAreaSelect(options)`,其中`options`可以包含初始值、数据源路径等参数。 最后,考虑到...

    java和js读取xml数据,处理下拉菜单

    在IT行业中,XML(eXtensible Markup Language)是一种用于存储和传输结构化数据的标记语言,广泛应用在数据交换、配置文件以及Web服务等领域。Java和JavaScript作为两种常用的编程语言,都有各自处理XML数据的方法...

Global site tag (gtag.js) - Google Analytics