JavaScript简单下拉菜单特效
本文实例为大家分享了js下拉菜单特效，供大家参考，具体内容如下
实例1：联动的省市下拉菜单
onchange 事件会在域的内容改变时发生。
<script type="text/javascript">
var arr = new Array(); //数据数组
//定义数据，结构为：id、名字、父id
arr[arr.length] = [1, '北京市', null];
arr[arr.length] = [2, '四川省', null];
arr[arr.length] = [3, '广东省', null];
arr[arr.length] = [4, '北京市', 1];
arr[arr.length] = [5, '成都市', 2];
arr[arr.length] = [6, '广州市', 3];
arr[arr.length] = [7, '深圳市', 3];
//动态设置下拉项目
function fillOptions(type){
if(type == 'province'){
//获取省份下拉菜单的DOM
var province = document.getElementById("province");
province.innerHTML = ''; //内容先置空
//填充省的字符
var proStr = '<option value=""></option>';
//遍历数组
for(var i=0; i<arr.length; i++){
var item = arr[i]; //当前项
//如果没有父id，则是省份
if(item[2] == null)
proStr += '<option value='+item[0]+'>'+item[1]+'</option>';
}
province.innerHTML = proStr;//填充新内容
}else if(type == 'city'){
//获取当前的省份的id
var currProId = document.getElementById("province").value;
if(currProId == '')
return false;
//获取城市下拉菜单的DOM
var city = document.getElementById("city");
city.innerHTML = ''; //内容先置空
//填充市的字符
var cityStr = '<option value=""></option>';
//遍历数组
for(var i=0; i<arr.length; i++){
var item = arr[i]; //当前项
//判断是否为当前省下的城市
if(item[2] == currProId)
cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';
}
city.innerHTML = cityStr ;//填充新内容
}
}
</script>
<body style="text-align:center;" onload="fillOptions('province');">
<!-- 定义下拉菜单 -->
省：<select id="province" onchange="fillOptions('city')"></select><br/><br/>
市：<select id="city"></select><br/><br/>
</body>
实例2：三级联动的省市县下拉菜单
<script type="text/javascript">
var arr = new Array(); //数据数组
//定义数据，结构为：id、名字、父id
arr[arr.length] = [1, '北京市', null];
arr[arr.length] = [2, '四川省', null];
arr[arr.length] = [3, '广东省', null];
arr[arr.length] = [4, '北京市', 1];
arr[arr.length] = [5, '成都市', 2];
arr[arr.length] = [6, '广州市', 3];
arr[arr.length] = [7, '深圳市', 3];
arr[arr.length] = [8, '武侯区', 5];
arr[arr.length] = [9, '青羊区', 5];
arr[arr.length] = [10, '白云区', 6];
arr[arr.length] = [11, '增城市', 6];
arr[arr.length] = [12, '从化市', 6];
//动态设置下拉项目
function fillOptions(type){
if(type == 'province'){
//获取省份下拉菜单的DOM
var province = document.getElementById("province");
province.innerHTML = ''; //内容先置空
//填充省的字符
var proStr = '<option value=""></option>';
for(var i=0; i<arr.length; i++){ //遍历数组
var item = arr[i]; //当前项
//如果没有父id，则是省份
if(item[2] == null)
proStr += '<option value='+item[0]+'>'+item[1]+'</option>';
}
province.innerHTML = proStr; //填充新内容
}else if(type == 'city'){
//获取当前的省份的id
var currProId = document.getElementById("province").value;
if(currProId == '')
return false;
//获取城市下拉菜单的DOM
var city = document.getElementById("city");
city.innerHTML = ''; //内容先置空
//填充市的字符
var cityStr = '<option value=""></option>';
for(var i=0; i<arr.length; i++){ //遍历数组
var item = arr[i]; //当前项
//判断是否为当前省下的城市
if(item[2] == currProId)
cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';
}
city.innerHTML = cityStr ;//填充新内容
}else if(type == 'area'){
//获取当前城市的id
var currCityId = document.getElementById("city").value;
if(currCityId == '')
return false;
//获取区县下拉菜单的DOM
var area = document.getElementById("area");
area.innerHTML = ''; //内容先置空
//填充区县的字符
var areaStr = '<option value=""></option>';
for(var i=0; i<arr.length; i++){ //遍历数组
var item = arr[i]; //当前项
//判断是否为当前城市下的区县
if(item[2] == currCityId)
areaStr += '<option value='+item[0]+'>'+item[1]+'</option>';
}
area.innerHTML = areaStr; //填充新内容
}
}
</script>
<body style="text-align:center;" onload="fillOptions('province');">
<!-- 定义下拉菜单 -->
省：<select id="province" onchange="fillOptions('city')"></select><br/><br/>
市：<select id="city" onchange="fillOptions('area')"></select><br/><br/>
县/区：<select id="area"></select><br/><br/>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
问题内容： 我已经尝试了大约一周的时间，以找出使用selenium2的下拉菜单。这是我正在使用ITA Matrix 2（http://matrix.itasoftware.com/）自动进行航班搜索的一个项目。一切正常，除了从下拉菜单中选择乘客人数。单击它可以正常工作，但是尝试向其发送键或箭头命令，以及尝试在弹出时创建的新ID都不会执行任何操作。感谢您的帮助！（我是python的新手，我正在做这个
-
我在Confluence上运行的HTML/CSS主题上实现了以下菜单。 默认情况下，我正在运行的主题提供了激活所有菜单项的下拉菜单的选项。但是，我希望只为其中一个菜单项显示下拉菜单。 该主题没有提供切换特定菜单项下拉列表的选项，这就是为什么我不得不求助于自定义CSS。 与发行说明菜单项对应的HTML如下-- 此外，添加以下自定义CSS将删除所有菜单项的下拉菜单。 我希望CSS有条件地不显示RELE
-
本文向大家介绍jQuery实现简单二级下拉菜单，包括了jQuery实现简单二级下拉菜单的使用技巧和注意事项，需要的朋友参考一下 html代码 js代码 css代码 最好不要忘记插入jQuery js文件,最好下载最新的。 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍JavaScript实现非常简单实用的下拉菜单效果，包括了JavaScript实现非常简单实用的下拉菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果。分享给大家供大家参考。具体如下： 这是一款实用的JS下拉菜单，鼠标移上菜单就显示出二级菜单，是从其它网站上整理下来的，修改花了不少时间，现在去除了一些无用代码，更简洁了，
-
我有一个插入符号指向我的导航项目，一旦点击导航项目，它会显示下拉框，旋转插入符号180并向上指向。唯一的问题是当你点击另一个导航项目时，它隐藏了下拉列表，但插入符号仍然指向上方。这是我用的JavaScript 单击另一导航项后，是否有方法将插入符号旋转回指向下方？
-
问题内容： 我正在尝试制作一个简单的CSS下拉菜单，当您将鼠标悬停在链接上时，将显示子菜单。当您将鼠标悬停在li上时，我已经设法实现了这一点，但无法弄清楚如何使用链接来实现。 我之所以尝试使用链接而不是li来执行此操作，是因为我的菜单宽度为100％，并且li所占的面积比链接大，因此，如果将鼠标悬停在该区域上，则不显示该子菜单不想。 我的CSS如下： 问题答案： 如果可能的话，我会避免使用JS。这不