文本框中选择选项selectbox.options的使用方法及技巧

发布时间：2022/01/10 丨 文章来源：未知 丨 浏览次数：

首先我们对选择框脚本作一个基本介绍同时介绍下有那些参数。
? ? ? ?选择框是通过和元素创建的。为了方便与这个控件交互，除了所有表单字段共 有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。? ? ? ? ?add(newOption, relOption)：向控件中插入新元素，其位置在相关项（relOption） 之前。 ? ? ? ?multiple：布尔值，表示是否允许多项选择；等价于 HTML中的 multiple 特性。 ? ? ? ?options：控件中所有元素的 HTMLCollection。 ? ? ? ?remove(index)：移除给定位置的选项。 ? ? ? ?selectedIndex：基于 0的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件， 只保存选中项中第一项的索引。 ? ? ? ?size：选择框中可见的行数；等价于 HTML中的 size 特性。 选择框的 type 属性不是"select-one"，就是"select-multiple"，这取决于 HTML代码中有 没有 multiple 特性。选择框的 value 属性由当前选中项决定，相应规则如下。? ? ? ? ? 如果没有选中的项，则选择框的 value 属性保存空字符串。 ? ? ? ? 如果有一个选中项，而且该项的 value 特性已经在 HTML中指定，则选择框的 value 属性等 于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。 ? ? ? ? 如果有一个选中项，但该项的 value 特性在 HTML中未指定，则选择框的 value 属性等于该 项的文本。 ? ? ? ? 如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。 以下面的选择框为例：? ?
? ? ? ?Sunnyvale?
? ? ? ?Los Angeles?
? ? ? ?Mountain View
? ? ? ?China Australia
?
? ? ? ?
? ? ? ?如果用户选择了其中第一项，则选择框的值就是"Sunnyvale, CA"。如果文本为"China"的选项 被选中，则选择框的值就是一个空字符串，因为其 value 特性是空的。如果选择了后一项，那么由 于中没有指定 value 特性，则选择框的值就是"Australia"。?
? ? ? ?在 DOM 中，每个元素都有一个 HTMLOptionElement 对象表示。为便于访问数据， HTMLOptionElement 对象添加了下列属性：?
? ? ? ? index：当前选项在 options 集合中的索引。?
? ? ? ? label：当前选项的标签；等价于 HTML中的 label 特性。?
? ? ? ? selected：布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。 ? text：选项的文本。?
? ? ? ? value：选项的值（等价于 HTML中的 value 特性）。 其中大部分属性的目的，都是为了方便对选项数据的访问。虽然也可以使用常规的 DOM功能来访 问这些信息，但效率是比较低的，如下面的例子所示：?

? ? ? ?var selectbox = document.forms[0].elements["location"];?
? ? ? ?//不推荐 var text = selectbox.options[0].firstChild.nodeValue; //选项的文本?
? ? ? ?var value = selectbox.options[0].getAttribute("value"); //选项的值?
? ? ? ?
? ? ? ?以上代码使用标准 DOM方法，取得了选择框中第一项的文本和值。可以与下面使用选项属性的代 码作一比较：?
? ? ? ?var selectbox = document.forms[0]. elements["location"];?

? ? ? ?//推荐?
? ? ? ?var text = selectbox.options[0].text; //选项的文本
? ? ? ?var value = selectbox.options[0].value; //选项的值
? ? ? ??
? ? ? ?在操作选项时，我们建议好是使用特定于选项的属性，因为所有浏览器都支持这些属性。在将表 单控件作为 DOM节点的情况下，实际的交互方式则会因浏览器而异。我们不推荐使用标准 DOM技术 修改元素的文本或者值。 最后，南昌网站建设公司前端开发工程师还想提醒读者注意一点：选择框的 change 事件与其他表单字段的 change 事件触发的 条件不一样。其他表单字段的 change 事件是在值被修改且焦点离开当前字段时触发，而选择框的 change 事件只要选中了选项就会触发。?
? ? ? ?
? ? ? ?不同浏览器下，选项的 value 属性返回什么值也存在差别。但是，在所有浏览 器中，value 属性始终等于 value 特性。在未指定 value 特性的情况下，IE8会返 回空字符串，而 IE9+、Safari、Firefox、Chrome和 Opera则会返回与 text 特性相同 的值。?
? ? ? ? 接下来详细介绍选择选项具体操作方法：
? ? ? ?
? ? ? ?对于只允许选择一项的选择框，访问选中项的简单方式，就是使用选择框的 selectedIndex 属 性，如下面的例子所示：?
? ? ? ?var selectedOption = selectbox.options[selectbox.selectedIndex];?
? ? ? ?取得选中项之后，可以像下面这样显示该选项的信息：?
? ? ? ?var selectedIndex = selectbox.selectedIndex;?
? ? ? ?var selectedOption = selectbox.options[selectedIndex];?
? ? ? ?alert("Selected index: " + selectedIndex + "nSelected text: " + selectedOption.text + "nSelected value: " + selectedOption.value);?


? ? ? ?这里，南昌网络公司前端开发工程师通过一个警告框显示了选中项的索引、文本和值。?
? ? ? ?对于可以选择多项的选择框，selectedfIndex 属性就好像只允许选择一项一样。设置 selectedIndex 会导致取消以前的所有选项并选择指定的那一项，而读取 selectedIndex 则只会返 回选中项中第一项的索引值。?
? ? ? ?另一种选择选项的方式，就是取得对某一项的引用，然后将其 selected 属性设置为 true。例如， 下面的代码会选中选择框中的第一项：?

? ? ? ?selectbox.options[0].selected = true; ? ? ??
? ? ? ?与selectedIndex 不同，在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项 的选择，因而可以动态选中任意多个项。但是，如果是在单选选择框中，修改某个选项的 selected 属性则 会取消对其他选项的选择。需要注意的是，将 selected 属性设置为 false 对单选选择框没有影响。?
? ? ? ?实际上，selected 属性的作用主要是确定用户选择了选择框中的哪一项。要取得所有选中的项， 可以循环遍历选项集合，然后测试每个选项的 selected 属性。来看下面的例子。?
? ? ? ?function getSelectedOptions(selectbox){?
? ? ? ?var result = new Array();?
? ? ? ?var option = null;?

for (var i=0, len=selectbox.options.length; i < len; i++){?
? ? ? ? ? ? ? option = selectbox.options[i];?
? ? ? ? ? ? ? if (option.selected){
? ? ? ? ? ? ? ?result.push(option);?
? ? ? ? ? ? ? }
? ? ? ? }?
? ? ? ?return result;
? ? ? ? }
? ? ? ?这个函数可以返回给定选择框中选中项的一个数组。首先，创建一个将包含选中项的数组，然后使 用 for 循环迭代所有选项，同时检测每一项的 selected 属性。如果有选项被选中，则将其添加到 result 数组中。后，返回包含选中项的数组。下面是一个使用 getSelectedOptions()函数取得 选中项的示例。?
? ? ? ?var selectbox = document.getElementById("selLocation");?
? ? ? ?var selectedOptions = getSelectedOptions(selectbox);
? ? ? ?var message = "";?

for (var i=0, len=selectedOptions.length; i < len; i++){
? ? ? ? message += "Selected index: " + selectedOptions[i].index + "nSelected text: " + selectedOptions[i].text + "nSelected value: " + selectedOptions[i].value + "nn"; }?
alert(message);?
? ? ? ?在这个例子中，我们首先从一个选择框中取得了选中项。然后，使用 for 循环构建了一条消息，包 含所有选中项的信息：每一项的索引、文本和值。这种技术适用于单选和多选选择框。?
? ? ? ?实例完整代码如下：



? ? ? ?
? ? ? ?

?
? ? ? ?

? ? ? ? ? ? ? Where do you want to live?
? ? ? ? ? ? ? ? ? ? Sunnyvale ? ? ? ? ? ? ? Los Angeles ? ? ? ? ? ? ? Mountain View ? ? ? ? ? ? ? China ? ? ? ? ? ? ? Australia ? ? ? ?
? ? ? ?

? ? ? ?

? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ?

?



? ?本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌APP开发公司-网络 http://www.huicuiwang.cn/ 如转载请注明出处!