js下拉菜单联动div_js如何实现下拉菜单选择正序倒序然后div内容的正序和倒序

1. 用js或者jq实现，根据下拉菜单的字段来显示对应的内容

在下拉菜单的change事件中，获得当前选择班级的标识，再从数据源中匹配这个标识的班级数据并展示

<body>
<selectid="class">
<optionvalue="一班">一班</option>
<optionvalue="二班">二班</option>
<optionvalue="三班">三班</option>
</select>
<divid="classStudent"></div>
<script>
vardata={
'一班':'张三,李四',
'二班':'周五,郑六',
'三班':'田七,王八'
};
//js
document.getElementById("class").addEventListener("change",function(){
document.getElementById("classStudent").innerHTML=data[this.value];
});
//jquery
/*
$("#class").change(function(){
$("#classStudent").html(data[this.value])
})
*/
</script>
</body>

2. js如何实现下拉菜单选择正序倒序，然后div内容的正序和倒序

数组方法sort 进行排序例如

arr.sort((a,b)=>{//数组从大到小进行排序
returna-b;
});

3. 谁会用DIV+CSS+JS做下拉列表，就是鼠标滑过就出现.......求一段简单的代码

第一种方法：
<html>
<head><title></title>
<style>
#rr{ width:500px; height:30px; list-style:none; padding:0;}
#rr li.dd{ float:left; margin-right:10px; margin-left:0; border:1px solid red; width:70px; text-align:center;}
#rr li.dd #tt{ list-style:none; padding:0; margin-left:0; display:none; margin-top:20px; width:70px;}
</style>
<script language="javascript">
function onMouseover()
{
var obj=document.getElementById("tt");
obj.style.display="block";
}
function onMouseout()
{
var obj=document.getElementById("tt");
obj.style.display="none";
}
</script>
</head>
<body>
<ul id="rr">
<li class="dd" id="gg" onmouseover="onMouseover()" onmouseout="onMouseout()"><a href="#">产品</a>
<ul id="tt">
<li><a href="#">避孕套</a></li>
<li><a href="#">伟哥</a></li>
<li><a href="#">充气娃娃</a></li>
</ul>
</li>
<li class="dd"><a href="#">首页</a></li>
<li class="dd"><a href="#">首页</a></li>
<li class="dd"><a href="#">首页</a></li>

</ul>
</body>
</html>
第二种方法：利用Jquery
<script src="jquery文件"></script>
<script language="javascript">
$(document).ready(function(){
$('#gg').hover(function(){
$('#tt').css('display','block');},function(){
$('#tt').css('display','none');
});
});
</script>

4. html+css+javascript 菜单单击式下拉菜单

HTML:

<!DOCTYPEhtml>
<html>
<head>
<title>Dropdown</title>
<linkrel="stylesheet"href="style.css">
<metacharset="utf-8"/>
</head>
<body>
<ul>
<liclass="dropdown">
<aid="a"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">标题</a>
<divclass="dropdown-content"id="dropdown-a">
<ahref="#">下拉1</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
<liclass="dropdown">
<aid="b"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">标题B</a>
<divclass="dropdown-content"id="dropdown-b">
<ahref="#">下拉1</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
</ul>
<scriptsrc="script.js"></script>
</body>
</html>

CSS (style.css):

body{
font-family:"LucidaSansUnicode","LucidaGrande",sans-serif;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
}
li{
float:left;
}
lia,.dropbtn{
display:inline-block;
color:white;
text-align:center;
padding:14px16px;
text-decoration:none;
}
lia:hover,.dropdown:hover.dropbtn{
background-color:#1f75cf;
}
li.dropdown{
display:inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:#fafafa;
min-width:160px;
box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
}
.dropdown-contenta{
color:black;
padding:12px16px;
text-decoration:none;
display:block;
text-align:left;
}
.dropdown-contenta:hover{
color:white;
background-color:#1f75cf;
}
.show{
display:block;
}

JavaScript (script.js):

functionshowList(o){
hideList("dropdown-content"+o.id);
document.getElementById("dropdown-"+o.id).classList.toggle("show");
}


functionhideList(option){
vardropdowns=document.getElementsByClassName("dropdown-content");

for(vari=0;i<dropdowns.length;i++){
varopenDropdown=dropdowns[i];
if(openDropdown.id!=option){
if(openDropdown.classList.contains('show')){
openDropdown.classList.remove('show');
}
}
}
}


window.onclick=function(e){
if(!e.target.matches('.dropbtn')){
hideList("");
}
}

点击标题 A：

JSFiddle 调试：jsfiddle.net/soL73u4y/2/

5. js 下拉框控制div的显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function showandhide(v){
//alert(v);
for(i=1;i<3;i++){
document.getElementById(i).style.display = 'none';
if(i==v){
document.getElementById(v).style.display = 'block';
}
}
}
</script>
<title>js 下拉框控制div的显示</title>
</head>

<body>
<select name="select" onchange = "showandhide(this.value)">
<option value="1">xxxx</option>
<option value="2">yyyy</option>
</select>
<div id="1">xxxx</div>
<div id="2" style="display:none;">yyyy</div>
</body>
</html>

导航:首页 > 编程语言 > js下拉菜单联动div

js下拉菜单联动div

与js下拉菜单联动div相关的资料

友情链接