js简单菜单三级联动

<!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" />
<title>js三级联动</title>
<style>
    .nav {
        background:url(images/jizhongkuanghuan.jpg) no-repeat;
        margin:0 auto;
        height:auto;
        width:100%;
        overflow:hidden;}
     #btn {
         margin:630px auto;
         width:30%;}
    select { text-align:center}
</style>
</head>

<body>
<div class="nav">
<div id=btn>
<select id="province" onchange="getCity()"></select>
<select id="city" onchange="getX()"></select>
<select id="xian" onchange="getPf()"></select>
<div id="pf"></div>
</div>
</div>
<script>
    var p = ["辅助","上单","中单","打野","射手"];
    var c = [["锤石","琴瑟仙女","荒野嫖客","蕾欧娜","布里茨"],
    ["瑞萌萌","潘森","诺克","无双剑姬","青钢影"],
    ["乐芙兰","劫","亚索","复仇焰魂","潮汐海灵"],
    ["盲僧","赵信","卡兹克","奈德丽","伊芙琳"],
    ["麦林炮手","复仇之矛","逆羽","维鲁斯","金克斯"]];
    var x = [[["skt","腥红之月"],["情人节限定","龙年限定"],["阿里斯塔","玫瑰"],["蕾欧娜","泳池派对"],["苹果机器人","擂台皇帝"]],
    [["瑞文","冠军之刃"],["潘森","屠龙勇士"],["诺克","灌篮高手"],["剑姬","源计划"],["青钢影","卡密尔"]],
    [["妖姬","万圣节"],["劫","源计划"],["西部牛仔","源计划"],["复仇焰魂","丧尸"],["小鱼人","大白兔"]],
    [["拳皇","龙年限定"],["赵信","子龙"],["卡兹克","螳螂"],["奈德丽","豹女"],["伊芙琳","寡妇"]],
    [["小炮","烈火雄心"],["卡莉斯塔","复仇之矛"],["逆羽","霞"],["情人节","苍穹之光"],["龙年限定","魔法少女"]]];
    var f = [[["chuishi","chuishi2"],["qinnv2","qinnv"],["niu","niu2"],["leiouna","leiouna2"],["bulici","bulici2"]],            [["ruiwen","ruiwen2"],["pansen","pansen2"],["nuoke","nuoke2"],["wushuangjianji","wushuangjianji2"],["qinggangying","qinggangying2"]],
    [["lefulan","lefulan2"],["jie","jie2"],["yasuo","yasuo2"],["huonan","huonan2"],["xiaoyu","xiaoyu2"]],
    [["xiazi","xiazi2"],["juhua","juhua2"],["kazike","kazike2"],["naideli","naideli2"],["guafu","guafu2"]],
    [["mailin","xiaopao2"],["fuchou","fuchouzhimao2"],["niyu","niyu2"],["weilusi","weilusi2"],["jinlesi","jinlesi2"]]];
    var temp = "";
    for(i=0;i<p.length;i++){
        temp += "<option value="+i+">"+p[i]+"</option>";
        }
    document.getElementById("province").innerHTML = temp;

    function getCity(){
        var getProv = document.getElementById("province").value;
        var temp = "";
        for(i=0;i<c[getProv].length;i++){
            temp += "<option value="+i+">"+c[getProv][i]+"</option>";
            }
        document.getElementById("city").innerHTML = temp;

        getX();
        }

    function getX(){
        var getProv = document.getElementById("province").value;
        var getCitys = document.getElementById("city").value;
        var temp = "";
        for(i=0;i<x[getProv][getCitys].length;i++){
            temp += "<option value="+i+">"+x[getProv][getCitys][i]+"</option>";
            }
            //alert(temp);
            document.getElementById("xian").innerHTML = temp;
            getPf();
        }
    function getPf(){
        var getProv = document.getElementById("province").value;
        var getCitys = document.getElementById("city").value;
        var getX = document.getElementById("xian").value;
        var temp = "";
        for(i=0;i<f[getProv][getCitys].length;i++){
            temp = "<img src=‘images/"+f[getProv][getCitys][getX]+".jpg‘ title=‘"+f[getProv][getCitys][getX]+"‘ />";
        }
        //alert(f[getProv][getCitys][getX]);
        document.getElementById("pf").innerHTML = temp;
        }
        getCity();
</script>
</body>
</html>

时间: 2024-09-30 06:55:01

js简单菜单三级联动的相关文章

JS省市县三级联动菜单

<html> <head> <title>JS省市县三级联动菜单丨潜水曝气机</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body,select { font-size:9pt; font-family:Verdana; } a { color:red; text-dec

JS实现全国三级联动

//引用js文件area.js <script src="/javascripts/area.js" type="text/javascript"></script> <li><label>全国 省 市 县 三级级联:</label> <i>*</i> <select id="s_province" name="s_province" c

js简单菜单

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServ

js实现省市级三级联动

之前做一个小项目时碰到了这个地域选择,三级联动的问题,找了很多源码,最后筛选出了我认为比较实用的代码,分享给大家. 首先,html文件应该有这样的select <select id="province" class="province"></select> <select id="city" class="city"></select> <select id="a

js实现省市区三级联动

电商平台或者一些网站的个人信息部分,通常会有填写地址的功能.该功能一般分为二级联动(省.市)和三级联动(省.市.区),只需要JavaScript就可以实现. 这里介绍一种很简洁易用的方法.参考地址:https://github.com/fengyuanchen/distpicker 获取上面Github目录下的dist/distpicker.js文件,然后准备一份jquery.js文件. 接下来,新建一个测试的HTML页面. 首先,引入以上的两个js文件: <script src="/pa

【原生js】原生js的省市区三级联动

html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>全国城市三级联动</title> 6 </head> 7 <body> 8 <div class="info&q

vue.js实现省市区三级联动

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>vue实现省市级三级联动</title> <script src="vue.min.js"></script> </head><body> <div id="my"&g

js实现菜单二级联动

代码如下,以便自己以后方便查阅: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>菜单二级联动效果</title> <

JS全国城市三级联动

HTML <select id="s_province" name="s_province"></select> <select id="s_city" name="s_city" ></select> <select id="s_county" name="s_county"></select> <scrip