option的用法html(option标签的用法)
html的下拉框的几个基本用法
html???
????head???
????????meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"???
????????titlegrid/title???
??
??
?????????
????/head???
????body???
??????input?type="button"?value="getSelect"?onclick?=?"getSelect()"/???
??????input?type="button"?value="selectbtn"?onclick?=?"getSelAge()"/???
????????
??????div???
??????select?name="selectAge"?id="selectAge"???
????????option?value="1"18-21/option???
????????option?value="2"22-25/option???
????????option?value="3"26-29/option???
????????option?value="4"30-35/option???
????????option?value="5"Over35/option???
???????????
??????/select???
??????/div???
??????p???
???????input?type="button"?value="moreSelect"?onclick?=?"moreSelect()"/???
??????div???
????????div多选?须要添加?multiple属性br???
????????????在多选中size属性?能够初始化下拉框默认显示几个选项???
????????/div???
????????div???
????????select?name="moreselAge"?id="moreselAge"?multiple="multiple"???
????????option?value="1"18-21/option???
????????option?value="2"22-25/option???
????????option?value="3"26-29/option???
????????option?value="4"30-35/option???
????????option?value="5"Over35/option???
????????option?value="6"Over40/option???
????????option?value="7"Over50/option???
???????????
??????/select???
????????/div???
??????/div???
??
??????p/p???
???????input?type="button"?value="addNewbtn"?onclick?=?"addNewSelections()"/???
????????input?type="button"?value="deletebtn"?onclick?=?"deleteselections()"/???
??
????????input?type="button"?value="deleAllbtn"?onclick?=?"deleteAllSelections()"/???
???????divselectName?:input?type="text"?id="txtName"//div???
???????divselectValue:input?type="text"?id="txtValue"//div???
??
??
???????div???
????????select?name="moreselAge"?id="addNew"???
????????option?value="1"?selected18-21/option???
????????option?value="2"22-25/option???
????????option?value="3"26-29/option???
????????option?value="4"30-35/option???
????????option?value="5"Over35/option???
????????option?value="6"Over40/option???
????????option?value="7"Over50/option???
???????????
??????/select???
????????/div???
??
????p移动选项/p???
?????p???
?????table???
????????tr?collspan="2"???
????????????td???
???????????????????div???
????????????????select?name="moreselAge"?id="move1"??multiple="multiple"?size="7"???
????????????????option?value="1"18-21sfiods/option???
????????????????option?value="2"22-25sjdfd/option???
????????????????option?value="3"26-29xxs/option???
????????????????option?value="4"30-35vs/option???
????????????????option?value="5"Over35dcff/option???
????????????????option?value="6"Over40shhfsd/option???
????????????????option?value="7"Over50sdefs/option???
????????????????option?value="8"Over88www/option???
???????????????????
??????????????/select???
????????????????/div???
???????????????
????????????/td???
????????????td?width="100"?align="center"???
????????????????input?type="button"?value=""?onclick?=?"rightSingle()"?/br???
?????????????????input?type="button"?value=""?onclick?=?"rightAll()"/br???
?????????????????input?type="button"?value=""?onclick?=?"leftSingle()"/br???
?????????????????input?type="button"?value=""?onclick?=?"leftAll()"/???
????????????/td???
???????????????
????????????td???
????????????????div???
????????????????select?name="moreselAge"?id="move2"??multiple="multiple"?size="7"???
????????????????option?value="1"18-21/option???
????????????????option?value="2"22-25/option???
????????????????option?value="3"26-29/option???
????????????????option?value="4"30-35/option???
????????????????option?value="5"Over35/option???
????????????????option?value="6"Over40/option???
????????????????option?value="7"Over50/option???
????????????????option?value="8"Over88/option???
???????????????????
??????????????/select???
????????????????/div???
????????????/td???
????????tr???
?????/table???
??
??
??
??????????
????/body???
????script?type="text/javascript"???
????????//获得下拉列表对象???
????????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?;?ioListbox.options.length;i++){???
????????????????//假设该项被选中则把该项相应的索引加入到数组中???
????????????????if(oListbox.options[i].selected){???
????????????????????????arrIndexes.push(i);???
????????????????}???
????????????}???
????????????return??arrIndexes;?//返回选中的选项索引???
????????}???
??
????/***************************************************************/??
????//?多选???
????????function?moreSelect(){???
????????????var?arrIndexes?=?ListUtil.getSelectIndexes(moreselAgeList);???
????????????alert("选中的数组length?=?"+?arrIndexes.length?+?"?选中的选项索引为?："+?arrIndexes);???
????????}???
??
/************************加入新选项***************************************************************/??
????//???
????var?addNewLisbox?=?document.getElementById("addNew");?//获得下拉框对象???
????var?otxtName?=?document.getElementById("txtName");???//name?文本框???
????var?otxtValue??=?document.getElementById("txtValue");?//value?文本框???
???????
??
????//加入方法???
????ListUtil.addOptions?=?function(oListbox,sName,sValue){???
???????????
????????var?arryV?=?new?Array();???
????????//标记输入的值能否够加入???
????????var?isAdd?=?false;???
????????//推断是否有反复的值???
????????for(var?i?=0?;ioListbox.options.length;i++){???
????????????var?sv?=?oListbox.options[i].getAttribute("value");???
????????????if(sv?==?sValue){???
????????????????alert("不能加入反复的value");???
????????????????return?;???
????????????}else{???
????????????????isAdd?=?true;???
????????????}???
????????}???
??
????????if(isAdd?||?oListbox.options.length?==?0){?????
??
????????????//以下使用dom方法创建节点???
????????????var?oOption?=?document.createElement("option");//?创建option元素???
????????????oOption.appendChild(document.createTextNode(sName));???
??
????????????//由于选项的值不是必须的，所以假设传入了值?则加入进来???
????????????if(arguments.length?==?3){???
????????????????oOption.setAttribute("value",sValue);???
????????????}???
????????????oListbox.appendChild(oOption);?//把选项加入进列表框???
????????????alert("加入成功!!");???
??
????????}???????//?end?if(isAdd)???
???????????
??
????}???
??
????//加入button的点击事件方法???
????function?addNewSelections(){???
????????var?txtname?=?otxtName.value;???
????????var?txtvalue?=?otxtValue.value;???
????????if(txtname?!=?""??txtvalue?!=?""){???
????????????ListUtil.addOptions(addNewLisbox,txtname,txtvalue);//加入新项???
????????????otxtName.value?=?"";???
????????????otxtValue.value?=?"";???
???????????
????????}else{???
????????????alert("请输入要加入的值和name");???
????????????return;???
????????}???
????}???
??
/*******************删除选中选项****************************************************************/??
??
//传入下拉框对象和(索引)???
ListUtil.deleteOptons?=?function(oListbox){???
????var?selIndex?=?oListbox.selectedIndex;???
??
????if(oListbox.options.length?==?0){???
????????alert("列表中无元素可删除");???
????????return?;???
????}???
????oListbox.remove(selIndex);?//删除选中的选项???
}???
??
//删除button点击事件???
function?deleteselections(){???
??
????ListUtil.deleteOptons(addNewLisbox);???
}???
??
/**********删除全部***********************************************************************/??
ListUtil.deletsAllOptions?=?function(oListbox){???
????if(oListbox.options.length?!=?0){??????????
????????for(var?i=?oListbox.options.length-1;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);???
??}???
??
??
??
????/script???
/html
Html Select option 如何进行默认选择
option ?selected = "selected"用?selected = "selected"默认选择。
select?name="isAudit"?
option?value="2"全部/option?
option?value="1"?selected?=?"selected"通过/option?!--这里默认--!
option?value="0"未通过/option?
/select
html 中的 是什么意思？
select
option value ="volvo"Volvo/option
option value ="saab"Saab/option
option value="opel"Opel/option
option value="audi"Audi/option
/select
下拉列表实例
html select标签中option的问题
下拉框要设个默认值例如 selected="selected"为默认选中
select name="abc"
option value="" selected="selected"选择月份/option
option value=0一月/option
option value=1二月/option
option value=2三月/option
option value=3四月/option
/selected月