html下拉列表？html下一页
大家好，今天给各位分享html下拉列表的一些知识，其中也会对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>
<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>
如何在网页中做下拉列表请高手指点。谢谢。
下拉框也称为下拉菜单，是表单中最常用的单选选项。您可以启用下拉框来接受多个选项，但我们不推荐这样做。如果希望网站访问者能够进行多项选择，请使用复选框。
在“网页”视图中文档窗口的底部，单击“设计”。
执行下列操作：
添加下拉框
单击表单或网页上要放置下拉框的位置。
在“插入”菜单上，指向“表单”，再单击“下拉框”。
注释如果尚未启动表单，默认情况下，Microsoft FrontPage会创建一个带有“提交”和“重置”按钮的表单区域，并将该域插入到此表单区域中。如果 FrontPage没有自动创建表单区域，说明默认设置已更改，您可以重置该设置。
操作方法
在“工具”菜单上，单击“网页选项”，然后单击“常规”选项卡。
找到并选中“在表单中自动围绕表单域”复选框。
在下拉框旁边或上部，键入其标签。
向下拉框添加选项
双击该下拉框。将打开“下拉框属性”对话框。
在“名称”框中，键入标识下拉框的唯一名称。这是内部名称，网站访问者看不到它。
为了让表单传输可以收集的数据，必须使用唯一的名称。
要添加希望显示在下拉框中的选项，请单击“添加”。
在“添加选项”对话框中，键入希望显示在下拉框中的选项。
如果希望表单结果显示的数据不同于“选项”框中的内容，请选择“指定值”，然后在框中键入值。
例如，菜单中的选项可能是 John，而表单结果中返回的值可能是 Smith。
如果希望指定在网站访问者首次打开表单时默认选中一个选项，请在“添加选项”对话框中的“初始状态”下，单击“选中”。
单击“确定”。
对每个要添加的选项重复步骤 3到 6。
设置下拉框中选项的属性
双击该下拉框。将打开“下拉框属性”对话框。
单击“添加”。将打开“添加选项”对话框。
若要更改“选项”列表中项目的顺序，请单击一个选项，然后单击“上移”或“下移”。
要控制希望显示在下拉框中的选项的数目，请在“高度”框中，键入希望显示的选项的数目。
例如，如果下拉框中有三个选项，您可以将高度设为“3”，这样所有的选项都能看见。
若要允许网站访问者在下拉框中选择多重选项，请单击“允许多重选项”下的“是”。
注释此选项默认情况下设置为“否”。但是，如果选择“是”，请通知网站访问者在选择时必须按下 Ctrl。
单击“样式”访问其他选项，这些选项通过使用级联样式表（级联样式表(CSS)：内嵌在网页中或存储于单独的.css文件中的声明，这些声明已链接到网页中，用于指定特定 HTML元素的外观。）作为嵌入式样式（嵌入式样式：将级联样式表属性和值应用到网页上的元素（例如表格）的方法。甚至当网页没有链接到外部样式表或不包含嵌入式样式表时，也可以使用此方法。）来设置表单格式。
修改
对于这个你就得用框架把网页分成几部分一部分包含下拉菜单下部分是另一部分网页之后下栏菜单选择连接到一个网页但是网页在框架中打开可能说的不太明白你查一下框架的应用就明白了！！
文章到此结束，如果本次分享的html下拉列表和html下一页的问题解决了您的问题，那么我们由衷的感到高兴！