`

select和option操作

 
阅读更多

http://www.jb51.net/article/16240.htm

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; 

分享到：
| stream.js
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 操作select和option

    ### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中，`&lt;select&gt;` 元素是一种常见的表单控件，用于收集用户输入的选择项。它通常包含多个 `&lt;option&gt;` 子元素供用户选择。通过 JavaScript，我们可以实现...

    select option带自定义图片

    总结来说，要实现`&lt;select&gt;`和`&lt;option&gt;`带有自定义图片的效果，我们需要结合HTML的`data-*`属性，JavaScript的动态操作和CSS的样式设计。这不仅增强了用户体验，也展示了前端技术在实现视觉效果方面的灵活性。在...

    js实现动态生成select中的option

    在JavaScript中，我们可以通过DOM操作来创建和添加`option`元素。首先，我们需要一个数组来存储下拉列表的数据，这些数据可以是字符串，也可以是对象，取决于我们的具体需求。 以下是一个基本的步骤： 1. **准备...

    Javascript操作Select和Option

    Javascript操作Select和Option 一个网页 挺全的

    javascript_select_option_操作详解.txt

    ### JavaScript Select Option 操作...通过以上方法，我们可以非常方便地对 `&lt;select&gt;` 和 `&lt;option&gt;` 进行各种操作，满足网页开发中的各种需求。这些方法不仅能够帮助开发者更好地管理表单数据，还能提高用户体验。

    JS动态添加Select中的Option元素值

    首先，我们要理解HTML的Select元素和Option元素。Select元素用于创建一个下拉列表，而Option元素则表示列表中的一个选项。在HTML中，我们可以预先定义一些Option，但有时候我们需要在运行时根据用户的行为或服务器...

    Jquery操作Select option整理

    ### jQuery 操作 Select Option 整理 #### 一、引言 在Web开发中，`&lt;select&gt;`元素作为用户交互的重要部分，常用于提供一系列选项供用户选择。jQuery作为一种流行的JavaScript库，极大地简化了DOM操作的过程，使得...

    jquery获得select option值

    var item = $("select[@name=items] option:selected").text(); ``` 这里使用了`option:selected`选择器来选取当前被选中的`&lt;option&gt;`元素，并通过`.text()`获取其文本内容。 2. **设置默认选中的下拉项**： ``...

    Webdynpro for ABAP中select option 用法

    Select Options定义了一个范围表，该表包含四列：Sign、Option、Low和High。 例如，在ABAP报告中，可以这样声明一个范围表： ```abap DATA: s_carr_id TYPE carrid. SELECT-OPTIONS: r_carrid FOR s_carr_id. ``` ...

    jquery实现 两个select之间option的转移操作

    总结，通过jQuery，我们可以轻松实现两个`&lt;select&gt;`元素之间`&lt;option&gt;`的转移、全选、单选和删除操作。这大大提高了开发效率，使用户界面更加灵活和友好。在实际项目中，还可以根据需求添加更多的功能和优化，例如，...

    javascript 获取select ->option中id、value、label属性及中内容

    javascript 获取select -&gt;option中id、value、label属性及&lt;option&gt;&lt;/option&gt;中内容

    select将选中的option设置为默认选项

    首先，我们需要了解`&lt;select&gt;`和`&lt;option&gt;`的基本用法。`&lt;select&gt;`元素包含一个或多个`&lt;option&gt;`，用户可以在这些选项中进行选择。例如： ```html &lt;select id="mySelect"&gt; &lt;option value="1"&gt;Option 1&lt;/option&gt; ...

    向元素中动态添加option

    总的来说，动态添加`&lt;option&gt;`涉及了JavaScript的基本DOM操作和事件处理。理解并掌握这些技术对于提升网页交互性和用户体验至关重要。在阅读提供的博客文章后，开发者可以深入学习相关概念，以便在自己的项目中灵活...

    js select option

    首先，让我们了解JavaScript原生的方法来操作`select`和`option`。通过`document.getElementById('id')`或`document.querySelector('#id')`，你可以获取到对应的`select`元素。一旦有了引用，就可以使用`.options`...

    JQuery操作select

    `$("#testSelect option:selected").text()`和`$("#testSelect").find('option:selected').text()`都是获取选中option的文本内容，而`$("#testSelect").val()`则是获取选中option的值。这些方法在需要读取用户选择时...

    用jquery获取select标签中选中的option值及文本的示例

    综上所述，示例演示了使用jQuery来获取select标签中选中项的值和文本的方法，并考虑了没有value属性的特殊情况，还涉及到了事件绑定和DOM操作的基本知识。对于学习和使用jQuery进行前端开发的读者来说，这些内容都是...

    JS实现select选中option触发事件操作示例

    在该函数中，我们通过`getElementById`获取`&lt;select&gt;`元素，然后使用`options`属性和`selectedIndex`属性来获取当前选中的`&lt;option&gt;`。最后，我们可以访问选中`&lt;option&gt;`的自定义属性，如`grade`，并弹出警告框显示...

    两个select之间option的互相添加操作(jquery实现)

    总结以上知识点，可以看出，该jQuery插件提供了一个灵活而强大的方式来操作select元素中的option，使得选项的添加、移动和删除变得简单。这在动态网页和表单设计中是一个非常实用的功能，让用户体验更加友好和便捷。...

    JS更改select内option属性的方法

    通过JavaScript可以动态地对select元素内的option属性进行更改，实现更加动态和丰富的用户交互体验。本文详细介绍了如何使用JavaScript更改select元素内option的属性，包括更改选项文本、值等，并提供了一个实例来...

    js 操作select和option常用代码整理

    这篇文档主要总结了JavaScript操作`select`和`option`的一些常见代码片段。 1. **获取选中项的值和文本** 当用户选择了一个`&lt;option&gt;`后，可以通过`$(“#mySelect”).val()`获取选中项的`value`值，通过`$(“#...

Magicbox
Global site tag (gtag.js) - Google Analytics