javascript下拉菜单？js动态生成下拉列表

编程之家2026-05-24971次浏览

大家好，感谢邀请，今天来为大家分享一下javascript下拉菜单的问题，以及和js动态生成下拉列表的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

如何用javascript实现动态下拉式菜单

看似简单，实际要实现楼主的要求，如果仅使用javascript的话，需要使用AJAX异步调用后台数据。

首先AJAX调用的方法请参考

然后建立后台数据查询页面，确保页面正常运作。输出的数据可以格式化为JSON格式方便前台JS调用。这里假定你的后台页面经过查询数据库，获得学生名单并输出JSON文本为：

“[{name:'学生1',sn:'001'},{name:'学生2',sn:'002'},{name:'学生3',sn:'003'}]”

下面构建前台页面

<html>

<head>

//重写一下上面链接里的getDATA和showDATA两个函数

function getDATA(){

var xmlhttp= getXMLR();

if(xmlhttp){

var gotourl='getStudents.php';//这里假设你后台获得学生名单的页面是getStudents.php

xmlhttp.Open("POST",gotourl,false);

xmlhttp.onreadystatechange= showDATA;

xmlhttp.send();

}

function showDATA(){

if(xmlhttp.readyState==4){

var rs= xmlhttp.responseText;

}

eval("var sl="+rs);

var dpl= document.getElementById("select1");

for(var i=0;i<sl.length;i++){

dpl.innerHTML+='<option value="'+sl[i].sn+'">'+sl[i].name+'</option>';

}

</script>

</head>

<body>

</body>

</html>

未测试过，楼主自己试试吧。

如何用HTML编程实现下拉菜单

下拉菜单，其实就是使用HTML+css和一些小小的js就能很简单的实现，

首先需要你有至少有2个div然后在将第一个div作为父级元素，然后在使用position:absolut;绝对定位一下；

然后在使用JS，获取对象，然后添加一个鼠标的onmouseover事件就行了

在这里给你看下我以前的写的一个代码

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">

<head>

<title>简洁实用的二级下拉导航菜单</title>

body,html{padding:0;margin:0;text-align:center;font:normal 14px'arial';}

#mainNavBar{width:100%;background:#999;padding:10px 0;}

#nav{width:760px;height:30px;margin:0 auto;}

#nav ul{padding:0;margin:0;}

#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}

#nav ul li a{display:block;color:#fff;text-decoration:none;}

#nav ul li a:hover{font-weight:bold;background:#666;}

#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}

#subNav a{text-decoration:none;font-weight:normal;display:block;}

#subNav a:hover{color:#f00;background:#f00;}

</style>

</head>

<body>

<ul>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

var nav=document.getElementById("nav").getElementsByTagName("li");

for(i=0;i<nav.length;i++){

nav[i].onmouseover=function(){

this.style.fontWeight="bold";

this.style.overflow="visible";

this.style.background="#666666";

}

nav[i].onmouseout=function(){

this.style.fontWeight="normal";

this.style.background="#999999"

this.style.overflow="hidden";

}

</script>

</body>

</html>

#header#shousuo{

width:950px;

height:50px;

background:#f4f4f4;

margin-top:10px;

}

#shousuo ul li{

line-height:50px;

list-style-type:none;

float:left;

margin-left:5px;

font-weight:bold;

font-size:14px;

}

html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单

html做鼠标悬浮菜单上的选项能出现下拉菜单，CSS+JS做出此效果。

<body>内代码为：

<ULid=fm>

<LI><Arel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">一级菜单栏目</A>

<UL>

</LI>

<UL>

</UL></LI>

<UL>

</UL></LI></UL>为了突出效果，做的CSS样式代码为：

<STYLEtype=text/css>

*{margin:0;padding:0;border:0;}

#fm{line-height:24px;list-style-type:none;background:#666;}/*设置盒子的行高，去掉标记，设置背景颜色*/

#fma{display:block;width:80px;text-align:center;}/*设置A标签为块元素不显示，宽度，居中*/

#fma:link{color:#666;text-decoration:none;}/*设置未访问的链接样式*/

#fma:visited{color:#666;text-decoration:none;}/*设置已访问的链接样式*/

#fma:hover{color:#FFF;text-decoration:none;font-weight:bold;}/*当有鼠标悬停在链接上的颜色*/

#fmli{float:left;width:150px;background:#CCC;}

#fmlia:hover{background:#999;}

#fmliul{line-height:27px;list-style-type:none;text-align:left;left:-999em;width:80px;position:absolute;}

#fmliulli{float:left;width:80px;background:#F6F6F6;}

#fmliula{display:block;width:80px;width:80px;text-align:left;padding-left:5px;}

#fmliula:link{color:#666;text-decoration:none;}

#fmliula:visited{color:#666;text-decoration:none;}

#fmliula:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}

#fmli:hoverul{left:auto;}

#fmli.sfhoverul{left:auto;}

#content{clear:left;}

</STYLE>js代码为：

<SCRIPTtype=text/javascript>

functionmenuFix(){

varsfEls=document.getElementById("fm").getElementsByTagName("li");

for(vari=0;i<sfEls.length;i++){

sfEls[i].onmouseover=function(){

this.className+=(this.className.length>0?"":"")+"sfhover";

}

sfEls[i].onMouseDown=function(){

this.className+=(this.className.length>0?"":"")+"sfhover";

}

sfEls[i].onMouseUp=function(){

this.className+=(this.className.length>0?"":"")+"sfhover";

}

sfEls[i].onmouseout=function(){

this.className=this.className.replace(newRegExp("(?|^)sfhover\\b"),

"");

}

window.onload=menuFix;

</SCRIPT>最后的效果图为：

以上就是用html做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。

关于javascript下拉菜单的内容到此结束，希望对大家有所帮助。

源码之家源码源码论坛英雄联盟纳尔技能介绍？英雄联盟纳尔怎么玩