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下拉框加上size弹不回去
在HTML中,如果使用`size`属性来设置下拉框的展示行数,它将显示指定行数的下拉选项。如果你发现下拉框无法弹回,可能是因为设置的`size`值过大,导致下拉框无法完全收起。要解决这个问题,你可以修改`size`属性的值为更合适的大小,使得下拉框可以正常弹回。以下是一些可能的解决方案:1. 减小`size`的...

HTML 下拉 列表 框的问题
\/\/---建立下拉框选项的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 ...

html下拉列表点不住怎么办
分别设置显示层级。html下拉列表点不住可以分别设置显示层级。HTML(英文HyperTextMarkupLanguage的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

html 里select
在HTML中,下拉列表框的默认值选择是一个关键功能。要实现这一点,你需要在标签中使用'selected'关键字。下面是一个示例代码:上海 北京 江苏 湖北 浙江 当你需要设置默认值时,只需在标签中添加'selected'属性,并将其值设为"true"或省略,因为HTML5默认情况下,如果一个选项没有指定selected属性,它...

一个简单的关于html下拉列表位置问题
层级比较高,所以不会影响到下面的文档内容。就好比你从天空俯瞰一座两层的小楼,你看到的是二楼,不会是一楼,因为二楼在一楼的上面。同样的,我们平时的网页文档就是一楼,你说的这个下拉列表就好比二楼,因为二楼在一楼的上面,所以在位置上他们是上层和下层的结构,相互之间不会影响 ...

html select下拉框获取值的问题
可以的,但由于要取刚一开始的默认值,所以select不会触发事件,所以要将取值过程放入onload中,以下是一个事例:<head> <script language="javascript" type="text\/javascript"> function viewselected() { for (i = 0; i < Select1.length; i++) { if (Select1.options[i].selected == true)...

html下拉框怎么设置默认值?
html下拉框怎么设置默认值?步骤如下:html代码部分:<select> <option value="1"> 北京<\/option> <option value="1" selected> 天津<\/option> <option value="1"> 上海<\/option> <\/select> 说明:selected属性就是默认值,天津被默认选中。效果图:注意事项:默认值只能设置一个,设置...

html的下拉框的几个基本用法
2016-11-29 html下拉框怎么设置默认值 2012-10-26 jsp下拉框默认不显示下拉框值 2015-04-24 html下拉框和文字如何排在一行? 2008-05-22 JSP 下拉框取值的问题. 2013-09-16 火狐下给下拉框赋值 2017-04-26 怎么用js 控制 html中select 下拉框的关闭 更多类似问题 > 为你推荐: 特别推荐 为什么立...

html中下拉列表里面文字如何提行
1、首先新建一个html文件,命名为test.html,在test.html页面,创建一个form表单,下面将通过form表单对象来取得selet下拉框的值。2、在form表单里面,创建一个select下拉框列表,其选项有三个,分别是选择一,选择二,选择三,三个选项分别有不同value值。3、在form表单的下面,创建一个button按钮,并...

html设置了下拉列表为什么不显示
用这样的代码一般是没有问题的:<select><option>请选择<\/option><\/select> 但就是不知道你用的是什么方式。怎么会出现不显示的问题。

相似回答
大家正在搜