javascript操作Select标记中options集合
先来看看options集合的这几个方法：
options.add(option)方法向集合里添加一项option对象；
options.remove(index)方法移除options集合中的指定项；
options(index)或options.item(index)可以通过索引获取options集合的指定项；
javascript代码如下：
var selectTag = null; //select标记
var OPTONLENGTH = 10; //每次填充option数
var colls = []; //对select标记options的引用
window.onload = function(){
selectTag = document.getElementById("SelectBox"); //获取select标记
colls = selectTag.options; //获取引用
//initSelectBox(); //自初始化select.options
};
//使用随机数填充select.options
function initSelectBox(){
var random = 0 ;
var optionItem = null;
var item = null;
if(colls.length > 0 && isClearOption()){
clearOptions(colls);
}
for(var i=0;i<OPTONLENGTH;i++){
random = Math.floor(Math.random()*9000)+1000;
item = new Option(random,random); //通过Option()构造函数创建option对象
selectTag.options.add(item); //添加到options集合中
}
watchState();
}
//添加新option项前是否清空当前options
function isClearOption(){
return document.getElementById("chkClear").checked;
}
//清空options集合
function clearOptions(colls){
var length = colls.length;
for(var i=length-1;i>=0;i--){
colls.remove(i);
}
}
//添加一项新option
function addOption(){
colls.add(createOption());
lastOptionOnFocus(colls.length-1);
watchState();
}
//创建一个option对象
function createOption(){
var random = Math.floor(Math.random()*9000)+1000;
return new Option(random,random);
}
//删除options集合中指定的一项option
function removeOption(index){
if(index >= 0){
colls.remove(index);
lastOptionOnFocus(colls.length-1);
}
watchState();
}
//获取当前选定的option索引
function getSelectedIndex(){
return selectTag.selectedIndex;
}
//获取options集合的总数
function getOptionLength(){
return colls.length;
}
//获取当前选定的option文本
function getCurrentOptionValue(index){
if(index >= 0)
return colls(index).value;
}
//获取当前选定的option值
function getCurrentOptionText(index){
if(index >= 0)
return colls(index).text;
}
//使用options集合中最后一项获取焦点
function lastOptionOnFocus(index){
selectTag.selectedIndex = index;
}
//显示当select标记状态
function watchState(){
var divWatch = document.getElementById("divWatch");
var innerHtml="";
innerHtml = "option总数:" + getOptionLength();
innerHtml += "<br/>当前项索引:" + getSelectedIndex();
innerHtml += "<br/>当前项文本:" + getCurrentOptionText(getSelectedIndex());
innerHtml += "<br/>当前项值:" + getCurrentOptionValue(getSelectedIndex());
divWatch.innerHTML = innerHtml;
divWatch.align = "justify";
}
注意到上面创建option项时，使用了Option()构造函数，这个构造函数有两个版本的重载。
1、var option = new Option(text,value); //这里要大写Option()
2、var option = new Option();
option.text = text;
option.value=value;
我个人比较喜欢第一种方法来创建option对象。
另外，select标记还有一个比较有用的属性就是selectedIndex，通过它可能获取当前选择的option索引，或通过索引设置指定options集合中哪一项被选择。
select.selctedIndex = select.options.length-1; //将options集合中最后一项选中
var selectedItem = select.options(select.selectedIndex);//获取当前选中项
selectedItem.text; //选中项的文本
selectedItem.value; //选中项的值
<BODY>
<Select name="SelectBox">
</Select>
<hr/>
<div id="divWatch" style="background-color:beige;width=220;">
</div>
<hr/>
<h4>使用随机数初始化SelectBox</h4>
<input type="button" value="Init" onclick="initSelectBox()"/> <input type="checkbox" name="chkClear"/>clear
<hr/>
<h4>添加option项</h4>
<input type="button" value="create" onclick="addOption()"/>
<hr/>
<h4>删除option项</h4>
<input type="button" value="delete" onclick="removeOption(colls.length-1)"/>
</BODY>
检测是否有选中
if(objSelect.selectedIndex > -1) {
//说明选中
} else {
//说明没有选中
}
删除被选中的项
objSelect.options[objSelect.selectedIndex] = null;
增加项
objSelect.options[objSelect.length] = new Option("你好","hello");
修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option("你好","hello");
得到所选择项的文本
objSelect.options[objSelect.selectedIndex].text;
得到所选择项的值
objSelect.options[objSelect.selectedIndex].value;
分享到：
相关推荐
以上就是关于“select标签边框的颜色”这一主题的主要知识点。理解并熟练运用这些技巧，可以使你的网页设计更加个性化和专业。在实践中，记得不断测试和调试，以确保在各种环境下的表现都符合预期。
### Jquery 获取 Select 标签的值 在前端开发中，使用 jQuery 框架能够极大地简化 DOM 操作，使得获取或设置 HTML 元素的属性变得更加容易。本篇文章将详细介绍如何利用 jQuery 来获取 Select 标签的值以及相关的...
select标签美化，支持空白处点击显示隐藏选项，目前测试过兼容Firefox、Chrome、IE5及以上，原来找到这个方案不支持空白点击事件，后面改好了测试了没问题，难免会有些bug，如果遇到需要优化欢迎交流！
`jsp`中的`html:select`标签主要用于创建HTML表单中的下拉选择列表。这个标签在Struts框架中尤其常见，因为它与ActionForm对象的属性紧密关联，方便数据的提交和回显。以下是对`html:select`标签的详细解释和使用...
在网页开发中，`<select>` 标签用于创建下拉菜单，通常用于提供用户一个选项列表进行选择。然而，标准的 `<select>` 标签默认只支持单选，但通过 JavaScript（JS） 和 jQuery（JQ） 的帮助，我们可以实现多选功能，...
在网页设计中，`<select>` 标签用于创建下拉列表，但其默认样式往往不符合现代网页的美观要求。为了提升用户体验并保持与原始HTML`<select>` 标签的功能兼容性，开发者通常会使用自定义样式来美化下拉菜单。本主题...
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
复制代码代码如下: document.getElementById(“selectid”).options.length = 0; 方法二 复制代码代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码代码如下: document....
### 一、`<select>`标签的基本结构 ```html <select> <option value="value1">Option 1 <option value="value2">Option 2 <!-- 更多选项... --> </select> ``` 在这个基本结构中，`<option>`标签定义了下拉列表...
因此，使用JavaScript来增强select标签的外观，让它在不同的浏览器中都表现出一致且美观的效果，就成为了前端开发中一个常见的需求。 JavaScript在美化select标签的过程中主要扮演了以下几个角色： 1. 隐藏原始...
这个“自定义的select标签”描述的正是这种技术的应用，用于构建一个定制化的下拉选择组件。在实际项目中，可能由于设计风格、交互需求或者功能增强的需求，开发者会选择自定义select标签，以提供更灵活的解决方案。...
在网页开发中，`<select>` 标签是用于创建下拉列表的元素，它可以提供多个选项供用户选择。在本篇文章中，我们将深入探讨如何使用`<select>`标签，并结合JavaScript API，来实现更丰富的交互功能。我们将涵盖以下几...
【标题】"分享带查询的select标签"涉及的是在网页开发中如何实现一个具有搜索功能的下拉选择框。在传统的HTML中，`<select>`标签用于创建一个下拉列表，但其默认功能并不支持用户输入关键词进行筛选。这篇博客（博文...
标题提到的“动态加载select标签下拉框数据”是指在用户交互时，根据需求动态地从服务器获取并填充HTML `<select>` 标签的选项，而不是一次性加载所有数据。这种技术常用于大数据量的下拉列表，以减少初始页面加载...
1. **获取Select标签的value值**： 要获取`Select`标签中当前选中的选项的`value`属性值，可以使用`$('select').val()`。例如： ```javascript var selectedValue = $('select').val(); ``` 这将返回`<select>`...
- 方法一：通过id选择器获取select标签，然后使用":selected"伪类选择器找到当前选中的option，接着使用.text()方法获取选中的option的文本内容。代码为`$("#sel option:selected").text();` - 方法二：通过id选择...
然而，原版的WebKit内核可能存在一些问题，如“select标签的bug”，这可能指的是在某些情况下，<select>元素在显示或交互时可能遇到错误，导致用户体验不佳。此外，“无法隐藏控件的bug”可能是指在尝试通过编程方式...
### Struts2中s:select标签的使用详解 #### 一、引言 在Web开发领域，Struts2框架因其强大的功能和灵活的配置而受到广泛欢迎。其中，`s:select`标签作为Struts2标签库中的一个重要组成部分，在表单处理方面提供了...
在Struts中，`html:select`标签是用于创建HTML下拉列表的一个重要元素，特别适用于用户界面中需要选择单一或多个选项的场景。本文将深入探讨`html:select`标签的使用方法及其相关知识点。 首先，我们需要理解`...