HTML DOM 中的selectedIndex
- 机会：一个很偶然的机会我结识现在正要写的selectedIndex。天气很炎热， 但是也不能阻止我写下对它的看法，因为我知道它在我的脑海中不是一天、两天了。
- 定义和用法：
selectedIndex: 属性可设置或返回下拉列表中被选选项的索引号。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
<select name="" id="testS">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="address.idProvince" id="address_province" class="new-select">
<option selected="" id="option_add_1" value="1">北京</option>
<option id="option_add_2" value="2">上海</option>
<option id="option_add_4" value="4">重庆</option>
<option id="option_add_6" value="6">山西</option>
<option id="option_add_8" value="8">辽宁</option>
<option id="option_add_10" value="10">黑龙江</option>
<option id="option_add_12" value="12">江苏</option>
<option id="option_add_14" value="14">安徽</option>
<option id="option_add_15" value="15">浙江</option>
<option id="option_add_17" value="17">湖北</option>
</select>
</body>
</html>- 注释：若允许多重选择，则仅会返回第一个被选选项的索引号。
- 语法：
selectObject.selectedIndex=number
- 下面的例子可提示出被选选项的索引号：
<html>
<head>
<script type="text/javascript">
function getIndex()
{
var x=document.getElementById("mySelect");
console.log(x.selectedIndex);
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br />
<br />
<input type="button" onclick="getIndex()"
value="Alert index of selected option" />
</form>
</body>
</html>- 效果如下:
- 个人感觉对于
select的了解还不够深入，所以需要我在这里进行进一步的介绍select的详细介绍。 - Select 对象：
- Select 对象代表 HTML 表单中的一个下拉列表。
- 在 HTML 表单中，
<select>标签每出现一次，一个 Select 对象就会被创建。 - 您可通过遍历表单的
elements[]数组来访问某个 Select 对象，或者使用document.getElementById()。
- Select对象集合：
options[]: 返回包含下拉列表中的所有选项的一个数组。- 简单的介绍一下
options[]的用法:
- 定义与用法：
- option集合可返回包含
<select>元素中所有<option>的一个数组。 - 注释：数组中每个元素对应一个
<option>标签， 从-0开始。
- option集合可返回包含
- 语法：
selectObject.options[]
- 说明：
options[]:集合并非是一个普通的HTMLcollection。为了和早期的浏览器向后兼容，这个集合有某种特殊的行为：也就是允许通过select对象来改变显示的选项：
- 如果把
options.length属性设置为0，Select对象中的所有选项都会被清除。 - 如果
options.length属性的值比当前值小， 出现数组尾部的元素就会被丢弃。 - 如果把
options[]数组中的一个元素设置为null, 那么选项就会从Select中删除。 - 可以通过构造函数
Option()来创建一个新的option对象（需要设置option.length属性）。
- 如果把
- 定义与用法：
<html>
<head>
<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
var y="";
for (i=0;i<x.length;i++)
{
y+=x.options[i].text;
y+="<br />";
}
console.log(y);
}
</script>
</head>
<body>
<form>
请选择您喜欢的水果：
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br /><br />
<input type="button" onclick="getOptions()" value="输出所有选项">
</form>
</body>
</html>
- Select对象属性：
disabled: 设置或返回是否应禁用下拉列表。form: 返回或包含下拉列表的表单的引用。id: 设置或返回下拉列表的id。length: 返回下拉列表中的选项数目。-
JackDan9 Thinking
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
