新建一个html文件。如图
在html页面找打body标签，在这个标签里新建select标签，在select标签内创建option标签并设置内容。如图
代码：
<select>
<option>-请选择-</option>
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
保存好html文件后使用浏览器打开，即可看到效果。如图：
所有代码。可直接把所有代码复制到html文件上运行即可看到效果。如图：
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉选择框</title>
</head>
<body>
<select>
<option>-请选择-</option>
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</body>
</html>
如果要在HTML表格的右下角出现一个选择框，可以使用input元素和CSS来实现。首先，需要在最后一个单元格中添加一个input元素，并确保该元素位于表格右下角，然后设置input元素的type属性为"checkbox"，最后设置CSS来将其呈现为单独的选择框即可。代码
<html><body>
<FORM id=FORM1 name=FORM1 method=post language=JavaScript>
<INPUT class="Input" id=TxtBoxNo name=TxtBoxNo onkeyup="return Item_onkeyup(this,FORM1.BoxNo_input)"><span class="Span" id=SpanBoxNo name="SpanBoxNo">
<SELECT class="Select" id=BoxNo_input name=BoxNo_input onBlur="return Item_onBlur(this,FORM1.TxtBoxNo)" onMouseOver="return Item_onMouseOver(this)" onchange="return Input_onchange(this)">
<OPTION value="1" selected>1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
<OPTION value="5">5</OPTION>
<OPTION value="6">6</OPTION>
<OPTION value="7">7</OPTION>
<OPTION value="8">8</OPTION>
<OPTION value="9">9</OPTION>
<OPTION value="10">10</OPTION>
</SELECT>
</span>
<script language="JavaScript">
function Item_onkeyup(Object,ObjSelect){
var src = Object.value
/*
if( ObjSelect.id == "BoxNo_input" ){
var LoopLen=
6-src.length for(vari=0,j=0i<LoopLeni++ ){
src = j.toString() + src.toString()
}
}
*/
var hoststr = ObjSelect.value
var pos=1
//var ver = Number(ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion())
//if (ver >= 5.5){
for(var i=0 i< ObjSelect.length i++){
hoststr = Rtrim(ObjSelect.options[i].value.toString())
if( Rtrim(src) == Rtrim(hoststr) ){
pos = 0
}
//alert( pos )
if( pos == 0 ){
ObjSelect.options[i].selected = true
if( ObjSelect.options[ObjSelect.length-1].text == "ｸﾃﾖｵｲｻｺﾏｷｨ" ) {
ObjSelect.options[ObjSelect.length-1] = null
}
return true
}//if()
else{
ObjSelect.value = ""
}
}//for()
if( ObjSelect.value == "" ){
if( ObjSelect.options[ObjSelect.length-1].value != "" ){
ObjSelect.options[ObjSelect.length] = new Option("ｸﾃﾖｵｲｻｺﾏｷｨ","",false,true)
}//if()
}//if()
//}//if()
}//function()
function Item_onBlur(Object,TxtObject){
Object.style.width=22
Object.style.left=0
}
function Item_onMouseOver(Object){
Object.style.width=135
Object.style.left=-113
}
function Input_onchange(ObjSelect) {
if( ObjSelect.id == "BoxNo_input" ) {
FORM1.TxtBoxNo.value = ObjSelect.value
}
else if( ObjSelect.id == "UserID_input" ) {
FORM1.TxtUserID.value = Rtrim(ObjSelect.value)
}
if( ObjSelect.options[ObjSelect.length-1].text == "ｸﾃﾖｵｲｻｺﾏｷｨ" ) {
ObjSelect.options[ObjSelect.length-1] = null
}
}
function Rtrim(Value){
var src=Value
var des=" "
var pos = src.search(des)
return src.substring( 0, pos )?src.substring( 0, pos ):Value
}
</script>
<STYLE type=text/css>
.Input
{
FONT-WEIGHT:700
COLOR:WHITE
BACKGROUND-COLOR:ORANGE
HEIGHT:20PX
WIDTH:113PX
}
.Span
{
POSITION:absolute
}
.Select
{
FONT-WEIGHT:700
LEFT:0PX
POSITION:absolute
TOP:0px
WIDTH:22px
COLOR:WHITE
BORDER-RIGHT-LEFT:0px
BACKGROUND-COLOR:ORANGE
}
</STYLE>
</FORM>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）