在很多网站都有看到下拉框的功能，让我们一起来看看html如何制作下拉框。
01新建一个html文件。如图
02在html页面找打body标签，在这个标签里新建select标签，在select标签内创建option标签并设置内容。如图
代码：
<select>
<option>-请选择-</option>
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
03保存好html文件后使用浏览器打开，即可看到效果。如图：
04所有代码。可直接把所有代码复制到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>
这个很好写的，给你个例子吧：假如查询出的数据保存在student里，你的等级为一个list,(静态，动态自己定)，页面就这样<%
int[] list={ 0,1,2,3}
if(list!=null&&list.length!=0){
out.print(" <select id=\"dengji\" name=\"dengji\" onchange=\"javascript:onChangeBox()\">")
for(int i=0i<list.lengthi++){
if(student.getDendji()==list[i]){
out.print("<option value=\""+list[i]+"\" selected>"+"等级"+" "+list[i]+"</option>")
}else{
out.print("<option value=\""+list[i]+"\" >"+"等级"+" "+list[i]+"</option>")
}
}
}
out.print("</select>")
%>
如果只是显示就可以这么写，要做显示修改，还有声明个<input type="hidden" name="dengji" id="dengji" value="<%=student.getDengji%>"/>
然后用js给它重新赋值就可以了，js给帮你写个吧
<script type="text/javascript">
/** 下拉框选择**/
function onChangeBox(){
var dc=document.getElementById("dengji")
var index = dc.selectedIndex
var text = dc.options[index].value
document.all("dengji").value=text
}
</script>
事件在上面加上了，不用可以删掉，够详细了吧
用js先写个带参方法，参数就是2级联动的对象obj
写个ajax data参数就是obj.value， value传给后台获取数据返回给ajax，
然后ajax做你想做的页面处理。。。
<script language="javascript">
function getData(obj) {
var opt = obj.options[obj.selectedIndex]
//alert("The option you select is:"+opt.text+"("+opt.value+")")
$.ajax({
url : "你的url",
type : "Post",
data : 'diqu='+opt.value,
success : function(data1) {
//这里面就可以得到你后台获取过来的数据了，你可以做DOM处理
}
})
}
</script>
<SELECT onchange="getData(this)">
<OPTION value ="1">湖北</OPTION>
<OPTION value="2">湖南</OPTION>
<OPTION value ="3">河北</OPTION>
<OPTION value="4">河南</OPTION>
</SELECT>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）