HTML DOM 中的selectedIndex
2024-05-13 22:01:03
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
HTML DOM 中的selectedIndex相关推荐
- php js怎么去掉类属性,如何修改DOM中的属性，类和样式
通过jQuery来获取要修改的DOM元素,然后通过JavaScript中方法来对属性.类以及样式进行修改 今天在本篇文章中将分享的是如何通过修改html元素节点的样式,类和属性来进一步的更改dom,, ...
- HTML中常见的各种位置距离以及dom中的坐标讨论
最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的 ...
- DOM中Event 对象如何使用
DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...
- html5中的dom中的各种节点的层次关系是怎样的
html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...
- DOM中严格区分大小写
DOM中严格区分大小写.例如吧input.onblur写为input.onBlur则不会执行后面的代码
- DOM中的navigate()函数
DOM中的navigate()函数只在IE浏览器中有效果,在火狐中无效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- DOM中的onbeforeunload函数
DOM中的onbeforeunload函数在网页准备关闭(或离开)时出发,比如可以在事件中位"window.event.returnValue"赋值,要显示的警告确认信息,这样在离 ...
- DOM中window的navigate()重新导航到制定网址
DOM中window的navigate()重新导航到制定网址 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- php childnodes,小tips：HTML DOM中的children和childNodes属性
childNodes 属性 标准的,childNodes 属性返回节点的子节点集合,以 NodeList 对象.包括HTML节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当 ...
最新文章
- datasnap的客户端回传机制
- 智汇医工 创享未来：国家标准《健康医疗信息安全指南》验证项目启动会成功举办...
- SAP PM (工厂维护)模块介绍 - SAP入门必看
- 【组合数学】鸽巢原理 ( 鸽巢原理简单形式 | 鸽巢原理简单形式示例 1、2、3 )
- 多次执行echarts时出现 there is a chart instance already initialized on the dom
- 为什么使用hibernate
- 云原生除了K8S、微服务，还有...?
- P4177 [CEOI2008]order
- 1.2 数列和收敛数列
- java 实现电子签名_java swing实现手写板电子签名系统
- 华为USG6000防火墙基础配置简介
- 山西台达plc可编程控制器_可编程控制器(PLC)故障的常见原因及处理方法
- Android 视频裁剪 (含裁剪 View)
- 戴尔▪卡耐基《人性的弱点》阅读笔记（1）
- UE4冒泡排序蓝图、随机整数数组生成蓝图
- 有密码Win10创建新用户
- 自由传奇｜为你的队伍加油！
- 倒角距离（Chamfer distance）
- 桑基图（Echarts）——自定义风格
- 辗转相除法详解(C语言实现)