使用HTML中的和元素创建一个选择框。元素对应HTMLSelectElement接口，元素对应HTMLOptionElement接口。这两个接口通过HTMLElement接口共享来自其他HTML元素的所有属性和方法。从元素对应的HTMLSelectElement接口入手，介绍专属的属性和方法。autofocus：返回一个布尔值，指示控件是否应在页面加载时具有输入焦点，除非用户覆盖它。相当于元素上的autofocus属性。disabled：返回一个布尔值，表示控件是否被禁用。相当于元素上的disabled属性。form：一个只读属性，它返回一个HTMLFormElement值，表示与该元素关联的表单。labels：与此元素关联的元素的NodeList。length：返回一个数值，代表元素中元素的个数。multiple：返回一个布尔值，表示是否允许多选，相当于元素中的multiple属性。name：返回表示此控件名称的字符串值。相当于元素中的name属性。options：一个可读属性，它返回一个HTMLOptionsCollection值，表示此元素包含的元素集。required：返回一个布尔值，指示用户是否需要在提交表单之前选择一个值。相当于元素上的required属性。selectedIndex：返回一个数字值，表示第一个选定的元素的索引。值-1表示未选择任何元素，对于允许多项选择的列表，始终是第一个选项的索引。selectedOptions：一个可读属性，它返回一个HTMLCollection值，表示选定的元素集。size：返回一个数字值，表示控件中可见项的数量。相当于元素的size属性。默认值为1，如果multiple为true则为4。type：只读属性，返回表示表单控件类型的字符串值。当multiple为真时返回“select-multiple”，否则返回“select-one”。validationMessage：一个只读属性，它返回一个字符串值，表示描述控件不满足的验证约束的本地化消息。如果willvalidate=false或满足其约束，则此属性为空字符串。validity：返回ValidityState的只读属性，表示控件的有效状态。value：返回表示表单控件值的字符串值。返回选项元素的值属性，如果没有这样的属性，则返回文本属性。willValidate：一个只读属性，它返回一个布尔值，指示按钮是否是约束验证的候选者。如果任何条件禁止约束验证，则为false。add(elemen,before)：在before元素之前添加元素元素。element参数为要添加的元素，before参数为已有的元素，before为可选参数。checkValidity()：检查元素是否有任何约束以及它是否满足这些约束。如果元素未通过约束，浏览器会在该元素处触发可取消的无效事件并返回false。item(index)：从元素的options集合中获取一个元素。namedItem(name)：获取选项集合中具有指定名称的元素。传入的name参数可以匹配元素的id或name属性。remove(index)：从元素的选项集合中移除指定索引处的元素。reportValidity()：此方法向用户报告元素约束的问题。它在元素上触发一个可取消的无效事件，如果有问题则返回false，如果没有问题则返回true。setCustomValidity(error)：将元素的自定义有效性消息设置为指定的消息。使用空字符串表示该元素没有自定义有效性错误。下面根据不同的选中状态介绍元素的value属性的值：Sunnyvale洛杉矶MountainView中国澳大利亚选择选项框中的第一个项目时，元素的值为“sunnyvale，ca”；选择第四项时，元素的值为“”，因为该项目值属性是一个空字符串；如果选择了最后一项，则该值将为“澳大利亚”，因为元素未指定值属性。因此，根据上面的例子，元素的value属性是按照以下规则取值的：没有item被选中，元素的value属性为空字符串。有一个被选中的项，它的value属性有一个值，那么元素的value属性就是元素的value属性的值。有一个选中项，它的value属性没有指定值，元素的value属性的值为元素的文本值。如果有多个选中项，元素的值将取第一个元素的值或文本值。然后介绍元素对应的HTMLOptionElement接口的具体属性和方法。defaultSelected：返回一个布尔值。指示是否默认选中。禁用：返回一个布尔值。表示该选项被禁用，相当于元素的disabled属性的值。form：返回HTMLFormElement值的只读属性。如果是元素的后代，则指示与相应元素的表单值相同的值，否则为null。index：返回字符串的只读属性。表示选项在选项集合中的索引。label：返回字符串的只读属性。元素的标签，相当于元素的label属性。如果未设置此属性，读取此属性将返回元素的文本内容。selected：返回一个布尔值，表示该选项当前是否被选中。文本：返回一个字符串值。表示选项的文本值。值：返回字符串值。表示一个选项的值。相当于元素的value属性。这里强调一下，元素的change事件与其他表单域不同。其他表单字段在其值更改后触发更改事件，然后该字段失去焦点。而在选择项目后立即触发change事件。选项处理对于只允许选择一项的元素，获取选项的最简单方法是使用元素的selectIndex属性，如下例所示：letselectedOption=selectbox.options[selectbox.selectedIndex];option>元素，可以根据元素的属性和方法获取想要的信息。对于允许多项选择的元素，selectedIndex属性的行为就好像只允许选择一个项目一样。设置selectedIndex会移除所有选项，只选择指定的项，而获取selectedIndex只会返回第一个选择项的索引。也可以通过引用选项并将其selected属性设置为true来选择选项。例如，下面的代码将选中的第一项：selectbox.options[0].selected=true;与selectedIndex不同的是，设置一个选项的selected属性，在多选时不会移除其他选项，这样就可以动态选择任意多个选项。如果您修改单选按钮中某个选项的selected属性，则其他选项将被删除。请注意，将selected属性设置为false对单选按钮没有影响。selected属性可以决定在选择框中选择哪个选项。要获取所有选中项，需要循环遍历选项集，逐一检测选中的属性，例如：functiongetSelectedOptions(selectbox){letresult=newArray();for(letoptionofselectbox.options){if(option.selected){结果。推（选项）；}}返回结果；}添加选项您可以使用JavaScript动态创建选项并将它们添加到选择框。首先，您可以像这样使用DOM方法：;selectbox.appendChild(newOption);上面的代码创建了一个新的元素，使用文本节点添加文本，设置其value属性，并将其添加到选择框。添加到选择框后立即显示新选项。浏览器本机提供Option()构造函数来创建HTMLOptionElement实例：newOption(text,value,defaultSelected,selected)：HTMLOptionElementtext：表示选项文本内容的可选字符串值参数。如果省略，则返回一个空字符串。value：一个可选的字符串值参数，表示选项的值。如果省略，则默认为文本属性的值。defaultSelected：一个可选的布尔值参数，表示该项是否默认选中，默认为false。注意，即使设置为true，也不代表item的selected属性为true。selected：一个可选的布尔参数，指示该项目是否被选中。默认为假。我们来看案例：letnewOption=newOption("OptionText","OptionValue",true);创建后，您需要将实例添加到HTML的元素中。有两种添加方式：DOM操作appendChild()方法。接口HTMLSelectElement中的add()方法。这里详细介绍add()方法：add(element:HTMLOptionElement|HTMLOptGroupElement,before?:HTMLElement|number|null):void;元素：HTMLOptionElement或HTMLOptGroupElement元素的参数。before：可选参数，为集合中的一个元素或number类型的索引，表示插入到元素参数之前。如果为null或索引不存在，则新元素将添加到集合的末尾。如果你想符合所有浏览器的规范，你可以将undefined作为第二个参数传递。letnewOption=newOption("选项文本","选项值",true);selectbox.add(newOption,undefined);这里要注意defaultSelected和selected这两个参数，有时候很容易混淆。当selected属性为真时，的当前状态被选中。当defaultSelected属性为true时，表示默认选中，但不表示当前状态为选中。重置页面时，selected属性值为true的可能会变为未选中状态，而defaultSelected属性值为true的将始终被选中。移除元素的方法不止一种。下面列出的方法都可以实现：DOM操作中的removeChild()方法。HTMLSelectElement接口中的remove()方法。传递的参数是要删除的元素的索引。直接将null分配给指定的元素。比如selects.options[1]=null。要清除选择框的所有选项，您需要遍历所有选项并将其一一删除，如下例所示：functionclearSelectbox(selectbox){for(letindex=0;index从一个元素移动到另一个元素，该实现方法将元素在插入之前从其父元素中移除在指定的位置。如下：letselectbox1=document.getElementById("selLocations1");让selectbox2=document.getElementById("selLocations2");selectbox2.appendChild(selectbox1.options[0]);移动选项和移除选项将导致每个的索引属性被重置。要重新排列，在DOM操作中使用insertBefore()方法，移动到最后一个位置，使用appendChild()方法更方便。以下代码演示了在中将向前移动一个位置：letoptToMove=selectbox.options[1];selectbox.insertBefore(optToMove,selectbox.options[optionToMove.index-1]);本示例首先获取要移动的的索引，然后将其插入到其之前的之前，其中第二行代码适用于除第一行之外的所有。下面的代码可以将向下移动一个位置：letoptionToMove=selectbox.options[1];selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index+2]);总结和是HTML页面布局中经常用到的表单控件。学习使用对应的HTMLSelectElement和HTMLOptionElement接口中的属性和方法，轻松操作和元素。借助DOM操作和也更加方便。更多内容请关注公众号《海人的故事》
快速浏览JavaScript选择框操作相关文章
