html的下拉框的几个基本用法
2024-01-03 10:58:51
编辑：join
浏览量：596次
Java代码
grid 18-21 22-25 26-29 30-35 Over35 樱孙蔽 多选 需要增加 multiple属性 在多选中size属性 可以初始化下拉框默认显示几个选项 18-21 22-25 26-29 30-35 Over35 Over40 Over50 selectName : selectValue: 18-21 22-25 26-29 30-35 Over35 Over40 Over50 移动选项
18-21sfiods 22-25sjdfd 26-29xxs 脊州 30-35vs Over35dcff Over40shhfsd Over50sdefs Over88www " onclick = "rightSingle()" /> 凯弯 >" onclick = "rightAll()"/> 18-21 22-25 26-29 30-35 Over35 Over40 Over50 Over88
//获得下拉列表对象 oListbox = document.getElementById("selectAge"); var ListUtil = new Object(); var selectbtn = document.getElementById("selectbtn"); function getSelAge (){ //访问选项 alert(oListbox.options[1].firstChild.nodeValue); //显示的内容 alert(oListbox.options[1].getAttribute("value"));//对应的value alert("获得它在集合中的位置== " + oListbox.options[2].index); //获得它在集合中的位置 alert("获得集合的元素个数长度== " + oListbox.options.length); //获得集合的元素个数长度 } /*************************************************************************************************/ //获得选中选项 function getSelect(){ var indx = oListbox.selectedIndex; alert("获得选中的选项的索引 "+ indx ); } //多选下拉框 var moreselAgeList = document.getElementById("moreselAge"); /*******************************************************************/ //入参 下拉框对象 ListUtil.getSelectIndexes = function (oListbox){ var arrIndexes = new Array(); for(var i=0 ; i=0;i--){ //倒着删除是因为 oListbox.remove(i); } }else{ alert("该列表为空!"); } } function deleteAllSelections(){ ListUtil.deletsAllOptions(addNewLisbox); } /*******移动选项***************************************************************************************/ //获得下拉框 var move1Listbox = document.getElementById("move1"); //左边下拉框 var move2Listbox = document.getElementById("move2"); //右边下拉框 //移动一个或多个选中的选项 ListUtil.move = function(oListboxFrom ,oListboxTo){ //var idx1 = oListboxFrom.selectedIndex; var arrIndexes = ListUtil.getSelectIndexes(oListboxFrom); var oOption ; if(arrIndexes.length == 0 ){ alert("请选择至少一个选项!"); return ; }else{ for(var i=oListboxFrom.options.length-1;i>=0;i--){ oOption = oListboxFrom.options[i]; if(oOption.selected && oOption != null ){ oListboxTo.appendChild(oOption); } } } } //向右移 一个元素 function rightSingle(){ ListUtil.move(move1Listbox,move2Listbox); }; //向左移 一个元素 function leftSingle(){ ListUtil.move(move2Listbox,move1Listbox); } ListUtil.moveAll = function(oListboxFrom,oListboxTo){ for(var i=oListboxFrom.options.length-1;i>=0;i--){ oOption = oListboxFrom.options[i]; //alert(oOption); oListboxTo.appendChild(oOption); } } //向右移所有选项 function rightAll(){ ListUtil.moveAll(move1Listbox,move2Listbox); } //向左移所有选项 function leftAll(){ ListUtil.moveAll(move2Listbox,move1Listbox); }
标签：下拉框,html,用法
版权声明：文章由 知识百问 整理收集，来源于互联网或者用户投稿，如有侵权，请联系我们，我们会立即处理。如转载请保留本文链接：https://www.zhshbaiwen.com/answer/306375.html
