<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
</SCRIPT>
<SCRIPT LANGUAGE="javascript">
function Body_Init(oSelect,oText)
{
var iLeft= oSelect.offsetLeft
var iTop = oSelect.offsetTop
var iWidth=oSelect.clientWidth
var iHeight=oSelect.clientHeight
oSelect.style.clip='rect(0,'+iWidth+','+iHeight+','+(iWidth-18)+')'
oText.style.width=iWidth
oText.style.height=iHeight
oText.style.top =iTop
oText.style.left=iLeft
}
function Combo_Select(oSelect,oText)
{
oText.value=oSelect.options[oSelect.selectedIndex].text
alert(oText.value)
}
function Text_ChkKey(oSelect,oText)
{
if(event.keyCode==13)
{
var nIndex=HasTheValue(oText.value,oSelect)
if(nIndex !=-1 &&nIndex !=oSelect.selectedIndex)
{
oSelect.selectedIndex=nIndex
}
}
}
function HasTheValue(name,oSelect)
{
if(oSelect.options.length<1)
return -1
var i=0
for(i=0i<oSelect.options.lengthi++)
{
if(oSelect.options[i].text==name)
return i
}
return -1
}
</SCRIPT>
</HEAD>
<BODY onload="javascript:Body_Init(pCombo,pText)">
<table width=50% width=50% align="center" valign="middle">
<tr><td>
<SELECT STYLE="position:absoluteleft:0top:0" ONCHANGE="Combo_Select(this,pText)" NAME="pCombo" >
<option value="d">test1</option>
<option value="dd">test2</option>
<option value="dd">asds</option>
<option value="dd">awdfsfs</option>
</SELECT>
<INPUT STYLE="position:absolute" onKeyPress="Text_ChkKey(pCombo,this)" TYPE="TEXT" NAME="pText">
</td></tr>
</table>
</BODY>
</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>
<select><script>
for(var i=1i<=10i++){
document.write("<option value='"+i+"'>"+i+"</option>")
}
</script>
</select>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）