表单脚本学习（选择框脚本）

最新推荐文章于 2022-12-05 18:01:09 发布

Mccree1997

最新推荐文章于 2022-12-05 18:01:09 发布

阅读量269

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Mccree1997/article/details/78852226

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的选择框实现方式，包括如何使用<select>和<option>标签创建选择框，以及HTMLSelectElement提供的各种属性和方法，如add()、remove()、multiple等，帮助开发者更好地理解和操作选择框。

摘要由CSDN通过智能技术生成

选择框是通过<select><option> 来实现的，为了方便与这个控件交互，除了所有表单字段共有的属性和方法外，HTMLSelectElement提供了我们多种属性和方法

add()：向空间中插入新<option> 元素方法接收两个参数(newOption，relOption)，其位置在relOption之前
multiple：布尔值，表示是否允许多项选择
options：该空间中option元素的集合类数组
remove(index)：移除给定位置的项目
selectedIndex：基于0的选中值的索引，如果没有选中项，则值为-1.对于多选控件，只保存选中项的第一项的索引。
size：选择框中可见的行数，等价于HTML中的size特性

在DOM中，每个option元素都有一个HTMLOptionElement对象表示，为了便于访问数据，HTMLOptionElement对象添加了下列对象

index：当前选项在options集合中的索引
label：当前选项的标签，等于label特性
selected：布尔值，表示是否被选中
text：选项的文本
value：等同于HTML中value的值。

//HTML代码
<form>
    <select name="select">
        <option value="number">1</option>
        <option value="number">2</option>
        <option value="number">3</option>
    </select>
</form>
//JS代码
//得到表单
var select=document.forms[0].elements["select"];
//得到选中的选项
EventUtil.addHandler(select,"change",function(event){
    var target=event.target||event.srcElement;
    var selectOption=select.options[select.selectedIndex];
    alert("The "+target.value+" is "+selectOption.text)

})