地  址:江苏省南京市玄武区玄武湖
电  话:4008-888-888
邮  箱:9490489@qq.com
商  务QQ:3870238121
最好的自助建站系统:文本框当选择选项selectbox.options的利用办
作者:管理员    发布于:2020-05-30 07:17   文字:【】【】【
       选择框是通过 select 和 option 元素创建的。为了便利与这个控件交互,除了所有表单字段共 有的属性和方法外,HTMLSelectElement 类型还提供了下列属性和方法。         add(newOption, relOption):向控件中刺进新 option 元素,其方位在相关项(relOption) 之前。        multiple:布尔值,表明是否允许多项选择;等价于 HTML中的 multiple 特性。        options:控件中所有 option 元素的 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 属性将依据前两条规则取得第一个选中项的值。 以下面的选择框为例:    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 。         在 DOM 中,每一个 option 元素都有一个 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技能 修正 option 元素的文本或者值。 终究,天津网站建设公司前端开发工程师还想提示读者留意一点:选择框的 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 循环构建了一条音讯,包 含所有选中项的信息:每一项的索引、文本和值。这种技能适用于单选和多选选择框。         实例完好代码如下: !DOCTYPE html html head         title Selectbox Example /title         script type= text/javascript src= EventUtil.js /script /head body   form method= post action= javascript:alert( Form submitted! ) id= myForm           div               label for= selLocation Where do you want to live? /label       select name= location id= selLocation size= 5 multiple               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         /div         div               input type= button value= Select first option id= btnFirst               input type= button value= Select second option id= btnSecond               input type= button value= Get selected options id= btnSelected         /div /form   script type= text/javascript (function(){        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;                }        var btn1 = document.getElementById( btnFirst        var btn2 = document.getElementById( btnSecond        var btn3 = document.getElementById( btnSelected        var selectbox = document.getElementById( selLocation        EventUtil.addHandler(btn1, click , function(event){               selectbox.options[0].selected = true;        });        EventUtil.addHandler(btn2, click , function(event){               selectbox.options[1].selected = true;        });        EventUtil.addHandler(btn3, click , function(event){               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);        }); })(); /script /body /html   以上内容由科技(wzjs888)为您提供,转载请注明出处,更多有关天津网站建设,,、微信网站制造(微官网)、、企业UI设计等互联网应用效劳都可以联络我们。热线:9或致电3张主管。  科技每天都会不定时更新有关天津网站制造以及网络营销推广的文章,期望对您有用。  
科技是专业从事天津网站建设、天津网站制造、软件开发、移动建站、商城、微信端、app开发项目
软件事业部:天津市大学软件学院D-510(天津工业大学院内)
网站事业部: 天津市河北区北宁弯万福日子广场9-1208(华为手机旗舰店旁进口)
咨询热线:9 3
Copyright © 2002-2020 免费制作app网站_免费建站的网站_宣传网站制作_9免费建站的网站_免费网页制作模板 版权所有 (网站地图
地址:江苏省南京市玄武区玄武湖 电话:4008-888-888
邮箱:9490489@qq.com QQ:3870238121