JavaScript--18 操作 form 表单的选择框_js 取form中的勾选框-CSDN博客

本文链接：https://blog.csdn.net/qq_27127385/article/details/103599383

本文详细介绍了如何在JavaScript中操作form表单的选择框，包括select的属性和方法，option的属性，以及选择、添加、移除和移动选项的各种方式。重点讲解了selectedIndex、selected属性的使用，add()、remove()方法以及DOM操作在处理表单选择框时的应用。

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

选择框脚本

选择框简介

选择框是通过<select>和<option>元素创建的。
以下面的选择框为例：

<select name="location" id="selLocation">
  <option value="Sunnyvale, CA">Sunnyvale</option>
  <option value="Los Angeles, CA">Los Angeles</option>
  <option value="Mountain View, CA">Mountain View</option>
  <option value="">China</option>
  <option>Australia</option>
</select>

如果用户选择了其中第一项，则选择框的值就是"Sunnyvale, CA"。如果文本为"China"的选项被选中，则选择框的值就是一个空字符串，因为其value特性是空的。如果选择了最后一项，那么由于<option>中没有指定value 特性，则选择框的值是"Australia"。

select 的属性和方法

add(newOption, relOption)：向控件中插入新<option>元素，其位置在相关项（relOption）之前。
multiple：布尔值，表示是否允许多项选择；等价于HTML 中的multiple特性。
options：控件中所有<option>元素的HTMLCollection。
remove(index)：移除给定位置的选项。
selectedIndex：基于0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。
size：选择框中可见的行数；等价于HTML 中的size特性。

在这里插入图片描述

选择框的value属性由当前选中项决定，相应规则如下。

如果没有选中的项，则选择框的value属性保存空字符串。
如果有一个选中项，而且该项的value 特性已经在HTML 中指定，则选择框的value 属性等于选中项的value 特性。即使value 特性的值是空字符串，也同样遵循此条规则。
如果有一个选中项，但该项的value 特性在HTML 中未指定，则选择框的value属性等于该项的文本。
如果有多个选中项，则选择框的value 属性将依据前两条规则取得第一个选中项的值。