html下拉宽,html伸缩框
如何在HTML中做一个可以输入的下拉框
HTML中做一个可以输入的下拉框，需要用户添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置我们文本框的相关属性即可。具体操作步骤如下。
1、添加label标签设置我们的下拉菜单选项的内容相应的选项值，然后设置select标签，在select标签内部设置option选项标签，这里需要几个选项就设置几个标签。如下图所示。
2、将下拉菜单需要显示的每一个内容设置在option标签中，如图所示，预览的设置效果，在网页中我们可以看到一个下拉菜单。如下图所示。
3、有时候下拉菜单也需要设置一个默认的值，如果大部分内容都是相同的，可以将它设置为默认值，只需要在它相应的属性中设置为选中状态。如下图所示。
4、再次预览我们的网页，可以看到刚才设置checked的选项已经默认显示在了设置的下拉菜单中选中状态。如下图所以。
5、设置文本框，设置label标签，显示文本框的说明文字，然后添加textarea标签，内部设置文本框的相关属性。如下图所示。
6、最后，可输入下拉框制作完成。如下图所示。
注意事项：
HTML中做一个可以输入的下拉框按照上述步骤操作即可制作完成。
使用html和css实现元素下拉框的方法
以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。
第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。
未显示时属性为（ display: none;）显示时属性为（display: block;），结果就是能够显示与隐藏，但是动画效果没有表现出来。想不通...
除了使用display的属性之外，还可以使用：下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden; 来实现。
list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。
同样是通过overflow: hidden;实现隐藏，但是是通过visibility:visible;显示隐藏，动画效果仍然有效。
就是相比方法二将hover里面的属性由display: block; 改为visibility:visible;
以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。
比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden;和visibility:visible;实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。
html下拉选择框;html下拉框
在很多网站都有看到下拉框的功能，让我们一起来看看html如何制作下拉框。
新建一个html文件。如图
在html页面找打body标签，在这个标签里新建select标签，在select标签内创建option标签并设置内容。如图
代码：
select
option-请选择-/option
option1111111/option
option2222222/option
option3333333/option
/select
保存好html文件后使用浏览器打开，即可看到效果。如图：
所有代码。可直接把所有代码复制到html文件上运行即可看到效果。如图：
所有代码：
!DOCTYPE html
html
head
meta charset="UTF-8"
title下拉选择框/title
/head
body
select
option-请选择-/option
option1111111/option
option2222222/option
option3333333/option
/select
/body
/html
html中动态生成下拉框时的宽度设置
html中动态生成下拉框时的宽度设置的方法。
如下参考：
1.直接设置选择标签的宽度为100。具体操作步骤首先需要创建一个新的HTML文件，在文件中创建2个select下拉列表。
2.然后在顶部的标题标签中设置样式样式表。首先，设置第一个select标记的宽度。
3.然后设置select2的宽度。这里百分比用于设置宽度，如下图。
4.最后，当您打开浏览器时，您将看到两个不同宽度的select下拉列表。这就是HTML页面下拉列表控制宽度的设置方式，如下图。
html的下拉框的几个基本用法
下面是代码?
Java代码?
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)???
???????????
??
????}???
??
????//添加按钮的点击事件方法???
????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);?//删除选中的选项???
}???
??
//删除按钮点击事件???
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