地  址:江苏省南京市玄武区玄武湖
电  话:4008-888-888
邮  箱:9490489@qq.com
商  务QQ:2832830888
文字框选中择选项selectbox.options的应用方式及技能
作者:管理员    发布于:2020-07-16 14:04   文字:【】【】【
       挑选框是根据 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 特性储存空标识符串。         假如有1个选定项,并且该项的 value 特点早已在 HTML中特定,则挑选框的 value 特性等 于选定项的 value 特点。即便 value 特点的值是空标识符串,也一样遵照此条标准。         假如有1个选定项,但该项的 value 特点在 HTML中未特定,则挑选框的 value 特性等于该 项的文字。         假如有好几个选定项,则挑选框的 value 特性将根据前两条标准获得第1个选定项的值。 下列面的挑选框为例:    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                  假如客户挑选了在其中第1项,则挑选框的值便是 Sunnyvale, CA 。假如文字为 China 的选项 被选定,则挑选框的值便是1个空标识符串,由于其 value 特点是空的。假如挑选了后1项,那末由 于 option 中沒有特定 value 特点,则挑选框的值便是 Australia 。         在 DOM 中,每一个 option 元素都有1个 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方式,获得了挑选框中第1项的文字和值。能够与下面应用选项特性的代 码作1较为:         var selectbox = document.forms[0]. elements[ location            //强烈推荐         var text = selectbox.options[0].text; //选项的文字        var value = selectbox.options[0].value; //选项的值        
         
在实际操作选项时,大家提议好是应用特殊于选项的特性,由于全部访问器都适用这些特性。在将表 单控制做为 DOM连接点的状况下,具体的互动方法则会因访问器而异。大家不强烈推荐应用规范 DOM技术性 改动 option 元素的文字或值。 最终,天津市企业网站建设企业前端开发开发设计工程项目师还想提示读者留意1点:挑选框的 change 恶性事件与别的表单字段的 change 恶性事件开启的 标准不1样。别的表单字段的 change 恶性事件是在值被改动且聚焦点离去当今字段时开启,而挑选框的 change 恶性事件要是选定了选项就会开启。                 不一样访问器下,选项的 value 特性回到甚么值也存在区别。可是,在全部访问 器中,value 特性自始至终等于 value 特点。在未特定 value 特点的状况下,IE8会返 回空标识符串,而 IE9+、Safari、Firefox、Chrome和 Opera则会回到与 text 特点同样 的值。          接下来详尽详细介绍挑选选项实际实际操作方式:                针对只容许挑选1项的挑选框,浏览选定项的简易方法,便是应用挑选框的 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);             这里,前端开发开发设计工程项目师根据1个警示框显示信息了选定项的数据库索引、文字和值。         针对能够挑选多项的挑选框,selectedfIndex 特性就仿佛只容许挑选1项1样。设定 selectedIndex 会致使撤销之前的全部选项并挑选特定的那1项,而载入 selectedIndex 则只会返 回选定项中第1项的数据库索引值。         另外一种挑选选项的方法,便是获得对某1项的引入,随后将其 selected 特性设定为 true。比如, 下面的编码会选定挑选框中的第1项:           selectbox.options[0].selected = true;               与selectedIndex 不一样,在容许多选的挑选框中设定选项的 selected 特性,不容易撤销对别的选定项 的挑选,因此能够动态性选定随意好几个项。可是,假如是在单选挑选框中,改动某个选项的 selected 特性则 会撤销对别的选项的挑选。必须留意的是,将 selected 特性设定为 false 对单选挑选框沒有危害。         具体上,selected 特性的功效关键是明确客户挑选了挑选框中的哪1项。要获得全部选定的项, 能够循环系统遍历选项结合,随后检测每一个选项的 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;         }        这个涵数能够回到给定挑选框选中中项的1个数字能量数组。最先,建立1个将包括选定项的数字能量数组,随后使 用 for 循环系统迭代更新全部选项,另外检验每项的 selected 特性。假如有选项被选定,则将其加上到 result 数字能量数组中。后,回到包括选定项的数字能量数组。下面是1个应用 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);         在这个事例中,大家最先从1个挑选框中获得了选定项。随后,应用 for 循环系统搭建了1条信息,包 含全部选定项的信息内容:每项的数据库索引、文字和值。这类技术性可用于单选和多选挑选框。         案例详细编码以下: !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设计方案等互联网技术运用服务都可以以联络大家。热线:138⑵142-0129或致电136⑵215-0903张主管。  独运高新科技每日都会不确定时升级相关天津市网站建设和互联网营销推广营销推广的文章内容,期待对您有效。  
独运高新科技是技术专业从业天津市企业网站建设、天津市网站建设、手机软件开发设计、挪动建网站、商城、手机微信端、app开发设计新项目
手机软件工作部:天津市市大学手机软件学校D⑸10(天津市工业生产大学校内)
网站工作部: 天津市市河北省区北宁弯万顺日常生活城市广场9⑴208(华为手机上旗舰店旁通道)
资询热线:138⑵142-0129 136⑵215-0903
Copyright © 2002-2020 制作网页_国外最好的免费建站_免费h5页面制作网站_团购网站建设_免费动画制作网站 版权所有 (网站地图
地址:江苏省南京市玄武区玄武湖 电话:4008-888-888
邮箱:9490489@qq.com QQ:2832830888