html select下拉框？html中下拉框的代码
今天给各位分享html select下拉框的知识，其中也会对html中下拉框的代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
html里怎么设置下拉选项
html里可以用<select>标签设置下拉框。下面详细介绍其用法。
这是测试链接，可以参考本教程自己实操网页链接。
1、<select>标签
<select>标签在HTML里面是下拉框，用户点一下可以选择里面的选项
2、<option>标签
<option>标签是<select>标签的选项，它有2个东西需要设置，分别是值value和文本显示。
例如这个opion
<option value="0">请选择分类</option>
它的value是0，文本是"请选择分类"。
如果你在页面保存了一些信息，一般提交给服务器的时候提交的是它的value。
3、尝试编写例子
例如下面的代码，在html里面展示的效果如图
<select>
<option value="0">请选择分类</option>
<option value="1">美食/营养</option>
<option value="10">游戏/数码</option>
<option value="37">手工/爱好</option>
<option value="50">生活/家居</option>
<option value="73">健康/养生</option>
<option value="86">运动/户外</option>
<option value="93">职场/理财</option>
<option value="101">情感/交际</option>
<option value="108">母婴/教育</option>
<option value="123">时尚/美容</option>
</select>
html的下拉框的几个基本用法
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gbk">
<title>grid</title>
</head>
<body>
<inputtype="button"value="getSelect"onclick="getSelect()"/>
<inputtype="button"value="selectbtn"onclick="getSelAge()"/>
<div>
<selectname="selectAge"id="selectAge">
<optionvalue="1">18-21</option>
<optionvalue="2">22-25</option>
<optionvalue="3">26-29</option>
<optionvalue="4">30-35</option>
<optionvalue="5">Over35</option>
</select>
</div>
<p>
<inputtype="button"value="moreSelect"onclick="moreSelect()"/>
<div>
<div>多选须要添加multiple属性<br>
在多选中size属性能够初始化下拉框默认显示几个选项
</div>
<div>
<selectname="moreselAge"id="moreselAge"multiple="multiple">
<optionvalue="1">18-21</option>
<optionvalue="2">22-25</option>
<optionvalue="3">26-29</option>
<optionvalue="4">30-35</option>
<optionvalue="5">Over35</option>
<optionvalue="6">Over40</option>
<optionvalue="7">Over50</option>
</select>
</div>
</div>
<p></p>
<inputtype="button"value="addNewbtn"onclick="addNewSelections()"/>
<inputtype="button"value="deletebtn"onclick="deleteselections()"/>
<inputtype="button"value="deleAllbtn"onclick="deleteAllSelections()"/>
<div>selectName:<inputtype="text"id="txtName"/></div>
<div>selectValue:<inputtype="text"id="txtValue"/></div>
<div>
<selectname="moreselAge"id="addNew">
<optionvalue="1"selected>18-21</option>
<optionvalue="2">22-25</option>
<optionvalue="3">26-29</option>
<optionvalue="4">30-35</option>
<optionvalue="5">Over35</option>
<optionvalue="6">Over40</option>
<optionvalue="7">Over50</option>
</select>
</div>
<p>移动选项</p>
<p>
<table>
<trcollspan="2">
<td>
<div>
<selectname="moreselAge"id="move1"multiple="multiple"size="7">
<optionvalue="1">18-21sfiods</option>
<optionvalue="2">22-25sjdfd</option>
<optionvalue="3">26-29xxs</option>
<optionvalue="4">30-35vs</option>
<optionvalue="5">Over35dcff</option>
<optionvalue="6">Over40shhfsd</option>
<optionvalue="7">Over50sdefs</option>
<optionvalue="8">Over88www</option>
</select>
</div>
</td>
<tdwidth="100"align="center">
<inputtype="button"value=">"onclick="rightSingle()"/><br>
<inputtype="button"value=">>"onclick="rightAll()"/><br>
<inputtype="button"value="<"onclick="leftSingle()"/><br>
<inputtype="button"value="<<"onclick="leftAll()"/>
</td>
<td>
<div>
<selectname="moreselAge"id="move2"multiple="multiple"size="7">
<optionvalue="1">18-21</option>
<optionvalue="2">22-25</option>
<optionvalue="3">26-29</option>
<optionvalue="4">30-35</option>
<optionvalue="5">Over35</option>
<optionvalue="6">Over40</option>
<optionvalue="7">Over50</option>
<optionvalue="8">Over88</option>
</select>
</div>
</td>
<tr>
</table>
</body>
<scripttype="text/javascript">
//获得下拉列表对象
oListbox=document.getElementById("selectAge");
varListUtil=newObject();
varselectbtn=document.getElementById("selectbtn");
functiongetSelAge(){
//访问选项
alert(oListbox.options[1].firstChild.nodeValue);//显示的内容
alert(oListbox.options[1].getAttribute("value"));//相应的value
alert("获得它在集合中的位置=="+oListbox.options[2].index);//获得它在集合中的位置
alert("获得集合的元素个数长度=="+oListbox.options.length);//获得集合的元素个数长度
}
/*************************************************************************************************/
//获得选中选项
functiongetSelect(){
varindx=oListbox.selectedIndex;
alert("获得选中的选项的索引"+indx);
}
//多选下拉框
varmoreselAgeList=document.getElementById("moreselAge");
/*******************************************************************/
//入参下拉框对象
ListUtil.getSelectIndexes=function(oListbox){
vararrIndexes=newArray();
for(vari=0;i<oListbox.options.length;i++){
//假设该项被选中则把该项相应的索引加入到数组中
if(oListbox.options[i].selected){
arrIndexes.push(i);
}
}
returnarrIndexes;//返回选中的选项索引
}
/***************************************************************/
//多选
functionmoreSelect(){
vararrIndexes=ListUtil.getSelectIndexes(moreselAgeList);
alert("选中的数组length="+arrIndexes.length+"选中的选项索引为："+arrIndexes);
}
/************************加入新选项***************************************************************/
//
varaddNewLisbox=document.getElementById("addNew");//获得下拉框对象
varotxtName=document.getElementById("txtName");//name文本框
varotxtValue=document.getElementById("txtValue");//value文本框
//加入方法
ListUtil.addOptions=function(oListbox,sName,sValue){
vararryV=newArray();
//标记输入的值能否够加入
varisAdd=false;
//推断是否有反复的值
for(vari=0;i<oListbox.options.length;i++){
varsv=oListbox.options[i].getAttribute("value");
if(sv==sValue){
alert("不能加入反复的value");
return;
}else{
isAdd=true;
}
}
if(isAdd||oListbox.options.length==0){
//以下使用dom方法创建节点
varoOption=document.createElement("option");//创建option元素
oOption.appendChild(document.createTextNode(sName));
//由于选项的值不是必须的，所以假设传入了值则加入进来
if(arguments.length==3){
oOption.setAttribute("value",sValue);
}
oListbox.appendChild(oOption);//把选项加入进列表框
alert("加入成功!!");
}//endif(isAdd)
}
//加入button的点击事件方法
functionaddNewSelections(){
vartxtname=otxtName.value;
vartxtvalue=otxtValue.value;
if(txtname!=""&&txtvalue!=""){
ListUtil.addOptions(addNewLisbox,txtname,txtvalue);//加入新项
otxtName.value="";
otxtValue.value="";
}else{
alert("请输入要加入的值和name");
return;
}
}
/*******************删除选中选项****************************************************************/
//传入下拉框对象和(索引)
ListUtil.deleteOptons=function(oListbox){
varselIndex=oListbox.selectedIndex;
if(oListbox.options.length==0){
alert("列表中无元素可删除");
return;
}
oListbox.remove(selIndex);//删除选中的选项
}
//删除button点击事件
functiondeleteselections(){
ListUtil.deleteOptons(addNewLisbox);
}
/**********删除全部***********************************************************************/
ListUtil.deletsAllOptions=function(oListbox){
if(oListbox.options.length!=0){
for(vari=oListbox.options.length-1;i>=0;i--){//倒着删除是由于
oListbox.remove(i);
}
}else{
alert("该列表为空!");
}
}
functiondeleteAllSelections(){
ListUtil.deletsAllOptions(addNewLisbox);
}
/*******移动选项***************************************************************************************/
//获得下拉框
varmove1Listbox=document.getElementById("move1");//左边下拉框
varmove2Listbox=document.getElementById("move2");//右边下拉框
//移动一个或多个选中的选项
ListUtil.move=function(oListboxFrom,oListboxTo){
//varidx1=oListboxFrom.selectedIndex;
vararrIndexes=ListUtil.getSelectIndexes(oListboxFrom);
varoOption;
if(arrIndexes.length==0){
alert("请选择至少一个选项!");
return;
}else{
for(vari=oListboxFrom.options.length-1;i>=0;i--){
oOption=oListboxFrom.options[i];
if(oOption.selected&&oOption!=null){
oListboxTo.appendChild(oOption);
}
}
}
}
//向右移一个元素
functionrightSingle(){
ListUtil.move(move1Listbox,move2Listbox);
};
//向左移一个元素
functionleftSingle(){
ListUtil.move(move2Listbox,move1Listbox);
}
ListUtil.moveAll=function(oListboxFrom,oListboxTo){
for(vari=oListboxFrom.options.length-1;i>=0;i--){
oOption=oListboxFrom.options[i];
//alert(oOption);
oListboxTo.appendChild(oOption);
}
}
//向右移全部选项
functionrightAll(){
ListUtil.moveAll(move1Listbox,move2Listbox);
}
//向左移全部选项
functionleftAll(){
ListUtil.moveAll(move2Listbox,move1Listbox);
}
</script>
</html>
怎样用cssselect下拉框的美化
用cssselect下拉框的美化
这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：
<!-- html布局-->
<div id="selectStyle">
<select id="select">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</div>
首先要去掉#select的默认样式：
/*去掉默认样式，设置新的样式*/
#select{
display:block;
width:100%;
height:100%;
box-sizing:border-box;
background:none;
border:1px solid#222;
outline:none;
-webkit-appearance:none;
padding:0 5px;
line-height:inherit;
color:inherit;
cursor:default;
font-size:14px;
position:relative;
z-index:3;
}
#select option{
color:#222;
}
#select option:hover{
color:#fff;
}
#select option:checked{
background:#535353;
color:#fff;
}
然后在外层div#selectStyle设置自定义样式
#selectStyle{
display:block;
margin:0 auto;
overflow:hidden;
height:30px;
width:240px;
border-radius:0;
background:#535353 url("箭头图片地址") right center no-repeat;
background-size:auto 80%;
color:#fff;
line-height:2;
/*如果不想加图片，
则可以设置一个自己的三角形样式，
如下的自定义方式，
见代码1*/
position:relative;
z-index:1;
}
/*代码1*/
#selectStyle:before{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-2.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#fff transparent transparent transparent;
content:"";
}
/*代码1*/
#selectStyle:after{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-3.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#535353 transparent transparent transparent;
content:"";
}
以上就是自定义select样式的方法；
同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框（需要Javascript辅助）。
关于html select下拉框，html中下拉框的代码的介绍到此结束，希望对大家有所帮助。