首页技术html选择框 下拉框？html下载链接代码怎么写

html选择框 下拉框？html下载链接代码怎么写

编程之家2026-05-291055次浏览

大家好，关于html选择框 下拉框很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于html下载链接代码怎么写的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

html选择框 下拉框？html下载链接代码怎么写

html的下拉框的几个基本用法

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gbk">

<title>grid</title>

</head>

<body>

html选择框 下拉框？html下载链接代码怎么写

<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>

html选择框 下拉框？html下载链接代码怎么写

<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>

HTML 下拉 列表 框的问题

是可以实现的，只是比较麻烦，参考代码如下：

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style>

/* CSS Document*/

/* for input_dropMenu*/

body{

line-height:10px;

SCROLLBAR-FACE-COLOR:#eeeedd;

SCROLLBAR-HIGHLIGHT-COLOR:#eeeedd;

SCROLLBAR-SHADOW-COLOR:#666677;

SCROLLBAR-3DLIGHT-COLOR:#666677;

SCROLLBAR-ARROW-COLOR:#666677;

SCROLLBAR-TRACK-COLOR:#efefef;

SCROLLBAR-DARKSHADOW-COLOR:#eeeedd;

}

div{

font-size:9pt;

}

.dropMenu{

overflow:auto;

overflow-x:visible;

height:100%;

border-top:1px solid#aaaabb;

border-left:1px solid#aaaabb;

border-right:1px solid#666677;

border-bottom:2px solid#666677;

background-color:#fdfdfd;

FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=#eeeedd);

white-space:nowrap;

}

.dropMenu div{

cursor:Default;

color:#666677;

padding:1px 2px 1px 2px;

padding-top:2px;

script1:expression(

onmouseover=function(){

this.style.background="#0A246A"

this.style.fontWeight="normal"

this.style.color="white"

this.style.paddingLeft="3px"

},

onmouseout=function(){

this.style.background="none"

this.style.fontWeight="normal"

this.style.color="#666677"

this.style.paddingLeft="2px"

},

onclick=function(){

choose_dropMenu(this.parentNode.style.parent1,this)

}

);

}

</style>

</head>

<script language="JavaScript">

// JavaScript Document

/*

=== for input_dropMenu===

=== gotCode 2004-9-21===

*/

function drawShadowDiv(){

sDiv='<div id="shadowDiv"'+

'style="'+

'position:absolute;'+

'left:0px;top:0px;'+

'z-index:1;'+

'background-color:#2C6C85;'+

'layer-background-color:#2C6C85;'+

'display:none;'+

'FILTER:progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=10,finishOpacity=20,startX=0,finishX=0,startY=0,finishY=100);'+

'border:1px solid skyblue;'+

'"></div>'

document.write(sDiv)

}

drawShadowDiv()

function giveItShaow( which, sDiv,type){

if( type=="show"){

sDiv.style.zIndex= which.style.zIndex

sDiv.style.left= which.offsetLeft+ which.parentNode.offsetLeft+ 2;

sDiv.style.top= which.offsetTop+ which.parentNode.offsetTop+ 3;

sDiv.style.width= which.offsetWidth;

sDiv.style.height= which.offsetHeight;

sDiv.style.display="";

}else{

sDiv.style.display="none"

sDiv.style.zIndex= 1

}

}

//===显示下拉框===

/*

current_dropMenu=页面当前下拉框的ID

close_dropMenu=是否可以关闭下拉框

dropMenuGo= setTimeout的变量

*/

var current_dropMenu= null

var close_dropMenu= true

var dropMenuGo= null

function show_dropMenu( which){

current_dropMenu= which

if( dropMenuGo!= null){

clearTimeout(dropMenuGo)

}

//info.innerText= which.style.script1

eval("outSide_"+which.id).style.display=""

which.style.display=""

which.scrollTop= 0

marginTop= parseInt(which.style.marginTop)

if( marginTop<-3){

which.style.marginTop= marginTop+ Math.round(( 0- marginTop)/3)

}else if( marginTop>=-3&& marginTop< 0){

which.style.marginTop= marginTop+ 1

}

if( marginTop>= 0){

clearTimeout(dropMenuGo)

giveItShaow(which,shadowDiv,'show')

return

}

dropMenuGo= setTimeout("show_dropMenu("+which.id+")",10)//

}

//===隐藏下拉框===

function hide_dropMenu(){

if( current_dropMenu!= null){

if( close_dropMenu){

clearTimeout(dropMenuGo)

current_dropMenu.style.display="none"

eval("outSide_"+current_dropMenu.id).style.display="none"

current_dropMenu.style.marginTop= current_dropMenu.parentNode.offsetHeight*(-1)

giveItShaow(current_dropMenu,shadowDiv,'hide')

}

}

}

//===选择下拉框的值===

function choose_dropMenu( which, self){

close_dropMenu= true

hide_dropMenu()

//eval(which).document.body.innerText= self.innerText.substr(0,self.innerText.length-1)

eval(which).value= self.innerText

}

//===除前后空格===

function trim(str){

if( str.substr(0,1)==""){

str= str.substr(1)

}

if( str.substr(str.length-1,1)==""){

str= str.substr(0,str.length-2)

}

return str

}

function replaceFilters( str){

//str= str.replace(//g,"")

str= trim(str)

str= str.replace(/=/g,':')

str= str.replace(/:/g,':"')

str= str.replace(//g,'')

str= str.replace(/:"\/\//g,'://')

str= str.replace(/javascript:"/g,'javascript:')

str= str.replace(/,/g,'",')

str= str+'"'

str= str.replace(/""/g,'"')

str="{"+ str+"}"

return str

}

/*

type=变量名称

defaultVariables=默认的值（不能为空）

*/

function setFilters( type, defaultVariables){

if( filters[type]== undefined){

if( defaultVariables== undefined){

defaultVariables=""

}

eval( type+"=defaultVariables")

}else{

eval( type+"=filters[type]")

}

}

var getStr, cTmpStr

function Separate_Str(){

getStr=""

for( i= 0; i< cTmpStr.length; i++){

if( cTmpStr.substr(i,1)==""){

cTmpStr= cTmpStr.substr(getStr.length+1)

return getStr

}

getStr= getStr+ cTmpStr.substr(i,1)

}return getStr

}

//===drawDropMenu===

/*

iAutoID=自动编号

id=输入框的值

*/

var iAutoID= 0;

function SS_drawDropMenu( filter){

iAutoID++

if( filter== undefined){

filters={}

}else{

eval("filters="+ replaceFilters( filter))

}

setFilters("id","inputFrame"+iAutoID)

setFilters("form","")

setFilters("maxlength","")

setFilters("cItem","没有选项")

setFilters("value","")

setFilters("startColor","white")

setFilters("endColor","#eeeedd")

setFilters("onfocus","'javascript:;'")

setFilters("onblur","'javascript:;'")

setFilters("onmouseover","'javascript:;'")

setFilters("onmouseout","'javascript:;'")

setFilters("onmouseup","'javascript:;'")

setFilters("onmousedown","'javascript:;'")

setFilters("onkeyup","'javascript:;'")

setFilters("onkeydown","'javascript:;'")

setFilters("onchange","'javascript:;'")

if( form!=""){

parent1= form+"."+id

}else{

parent1= id

}

//---建立下拉框选项的html语句---

var itemCount//-下拉框选项的循环次数

var itemHtml=""//-html语句

var dropMenuHeight=""

var inputSize= 0//-下拉框的高度

itemCount= cItem.split('').length

cTmpStr= cItem

for( var i= 0; i< itemCount; i++){

menuValue= Separate_Str()

itemHtml= itemHtml+'<div>'+menuValue+'</div>\n'

if( menuValue.length> inputSize){

inputSize= menuValue.length

}

}

if( itemCount< 5){

dropMenuHeight=(17* itemCount+3)

}else{

dropMenuHeight= 88

}

setFilters("size", inputSize*2)

//---end---

oHtml='<div id="input_dropMenu'+id+'" style="display:inline;height:21px;">\n'+

'<table border="0" cellspacing="0" cellpadding="0">\n'+

'<tr>\n'+

'<td style="font-size:9pt;border:1px solid black;border-right:0px;">\n'+

'<input name="'+id+'" type="text" value="'+value+'" size="'+size+'" maxlength="'+maxlength+'" style="font-size:9pt;border:0px solid black;"'+

' onfocus='+onfocus+

' onblur='+onblur+

' onmouseover='+onmouseover+

' onmouseout='+onmouseout+

' onmouseup='+onmouseup+

' onmousedown='+onmousedown+

' onkeyup='+onkeyup+

' onkeydown='+onkeydown+

' onchange='+onchange+

'>'+

'</td>\n'+

'<td width="16px" style="font-size:9pt;border:1px solid black;border-left:0px;border-right:0px;">\n'+

'<div style="'+

'font-family:webdings;'+

'overflow:hidden;'+

'height:18;'+

'margin-left:-1px;'+

'border:2px solid outset;'+

'FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='+startColor+',endColorStr='+endColor+');'+

'"'+

' onmousedown="this.style.border=\'2px inset\'"'+

' onmouseup="this.style.border=\'2px outset\'"'+

' onmouseover="this.style.border=\'2px outset\'"'+

' onmouseout="this.style.border=\'2px outset\'"'+

'>\n'+

'<div style="'+

'font-size:9pt;'+

'margin-top:-3px;'+

'margin-left:1px;'+

'cursor:hand;'+

'color:#444444'+

'"'+

' onClick="show_dropMenu(dropMenu'+id+')"'+

' onmousedown="this.style.marginLeft=\'2px\';"'+

' onmouseup="this.style.marginLeft=\'1px\'"'+

' onselectstart="return false"'+

'>6</div>\n'+

'</div>\n'+

'</td>\n'+

'</tr>\n'+

'<tr>\n'+

'<td colspan="2">\n'+

'<div id="outSide_dropMenu'+id+'"'+

' class="outSideDropMenu"'+

' onselectstart="return false"'+

'style="'+

'display:none;'+

'position:absolute;'+

'z-index:21;'+

'margin-top:-1px;'+

'height:'+dropMenuHeight+'px;'+

'width:100%;'+

'overflow:hidden;'+

'overflow-x:visible;'+

'border:0px solid black;'+

'">\n'+

'<div id="dropMenu'+id+'" class="dropMenu" style="margin-top:expression(this.parentNode.offsetHeight*(-1));parent1:'+parent1+'" onMouseover="close_dropMenu=false;" onMouseout="close_dropMenu=true;">\n'+

itemHtml+

'</div>\n'+

'</div>\n'+

'</td>\n'+

'</tr>\n'+

'</table>\n'+

'</div>\n'

document.write(oHtml)

}

</script>

<body onMousedown="hide_dropMenu();">

<form name="form1" method="post" action="">

姓名:

<input name="cName" type="text" id="cName" size="10">

<br>

年龄:

<input name="iAge" type="text" id="iAge" size="10">

<br>

职位:<script>SS_drawDropMenu('id=kkk,form=form1,cItem=科员科长所长局长')</script><script>SS_drawDropMenu('id=kkk2,form=form1,cItem=科员科长所长局长')</script>

<input name="dd" type="button" value="提交" onclick="alert(form1.kkk.value)">

</form>

<p></p></body>

</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>

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！

买了个网站源码后要怎么用，怎么自己创建一个网站大一c语言必背知识点，大一c语言编程题库100题
↑