财神道app下载最新版本-财神到购彩大厅(彩世界)

热门关键词: 财神道app下载最新版本,财神到购彩大厅

JS制作简单的三级联动

相关小说

有关搜索:

明日看甚

寻找技能库

回来首页

  • iOS9遮蔽本事:第三方应用音讯灵通回复
  • OPPO会采用无边框设计呢?
  • 苹果ios 9新版备忘录涂鸦工具令你随意
  • iphone自定义怎么修改互联网标记字符
  • iphone 6的Safari密码掩盖在哪里
  • iphone6开启限制广告追踪教程

连带频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表明式  Flex教程  WEB前端教程  

JS制作简便的三级联合浮动,

用javascript制作的三个差不离三级联合浮动,特别轻巧实用

复制代码 代码如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        省:
        <select style="width: 100px;" id="pre" onchange="chg(this);">
            <option value="-1">请选择</option>
        </select>
        市:
        <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
        区:
        <select style="width: 100px;" id="area"></select>
    </body>
    <script>
         //声明省
        var pres = ["北京", "上海", "山东"]; //直接表明Array
         //声明市
        var cities = [
            ["东城", "昌平", "海淀"],
            ["浦东", "高区"],
            ["济南", "青岛"]
        ];
        var areas = [
                [
                    ["东城1", "东城2", "东城3"],
                    ["昌平1", "昌平2", "昌平3"],
                    ["海淀1", "海淀2", "海淀3"]
                ],
                [
                    ["浦东1", "浦东2", "浦东3"],
                    ["高区1", "高区2", "高区3"]
                ],
                [
                    ["济南1", "济南2"],
                    ["青岛1", "青岛2"]
                ]
            ]
            //设置三个省的公共下标
        var pIndex = -1;
        var preEle = document.getElementById("pre");
        var cityEle = document.getElementById("city");
        var areaEle = document.getElementById("area");
         //先设置省的值
        for (var i = 0; i < pres.length; i ) {
            //声明option.<option value="pres[i]">Pres[i]</option>
            var op = new Option(pres[i], i);
            //添加
            preEle.options.add(op);
        }
        function chg(obj) {
            if (obj.value == -1) {
                cityEle.options.length = 0;
                areaEle.options.length = 0;
            }
            //获取值
            var val = obj.value;
            pIndex = obj.value;
            //获取ctiry
            var cs = cities[val];
            //获取暗中认可区
            var as = areas[val][0];
            //先清空市
            cityEle.options.length = 0;
            areaEle.options.length = 0;
            for (var i = 0; i < cs.length; i ) {
                var op = new Option(cs[i], i);
                cityEle.options.add(op);
            }
            for (var i = 0; i < as.length; i ) {
                var op = new Option(as[i], i);
                areaEle.options.add(op);
            }
        }
        function chg2(obj) {
            var val = obj.selectedIndex;
            var as = areas[pIndex][val];
            areaEle.options.length = 0;
            for (var i = 0; i < as.length; i ) {
                var op = new Option(as[i], i);
                areaEle.options.add(op);
            }
        }
    </script>
</html>

上述所述便是本文的全体内容了,希望大家能够欣赏。

用javascript制作的一个回顾三级联合浮动,特别简单实用 复制代码 代码如下: !DOCTYPE html html head meta charset="utf-8" title/t...

JS制作简便的三级联合浮动

 本文给大家大饱眼福的是利用javascript完毕的两个简易的三级联动菜单,特别简单实用,有须求的小同伴过来参考下呢。

 

 

用javascript制作的四个简练三级联合浮动,特别轻便实用

 

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
省:
<select style="width: 100px;" id="pre" onchange="chg(this);">
<option value="-1">请选择</option>
</select>
市:
<select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
区:
<select style="width: 100px;" id="area"></select>
</body>
<script>
//声明省
var pres = ["北京", "上海", "山东"]; //直接表明Array
//声明市
var cities = [
["东城", "昌平", "海淀"],
["浦东", "高区"],
["济南", "青岛"]
];
var areas = [
[
["东城1", "东城2", "东城3"],
["昌平1", "昌平2", "昌平3"],
["海淀1", "海淀2", "海淀3"]
],
[
["浦东1", "浦东2", "浦东3"],
["高区1", "高区2", "高区3"]
],
[
["济南1", "济南2"],
["青岛1", "青岛2"]
]
]
//设置八个省的公共下标
var pIndex = -1;
var preEle = document.getElementById("pre");
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
//先设置省的值
for (var i = 0; i < pres.length; i ) {
//声明option.<option value="pres[i]">Pres[i]</option>
var op = new Option(pres[i], i);
//添加
preEle.options.add(op);
}
function chg(obj) {
if (obj.value == -1) {
cityEle.options.length = 0;
areaEle.options.length = 0;
}
//获取值
var val = obj.value;
pIndex = obj.value;
//获取ctiry
var cs = cities[val];
//获取暗中同意区
var as = areas[val][0];
//先清空市
cityEle.options.length = 0;
areaEle.options.length = 0;
for (var i = 0; i < cs.length; i ) {
var op = new Option(cs[i], i);
cityEle.options.add(op);
}
for (var i = 0; i < as.length; i ) {
var op = new Option(as[i], i);
areaEle.options.add(op);
}
}
function chg2(obj) {
var val = obj.selectedIndex;
var as = areas[pIndex][val];
areaEle.options.length = 0;
for (var i = 0; i < as.length; i ) {
var op = new Option(as[i], i);
areaEle.options.add(op);
}
}
</script>
</html>

 

如上所述正是本文的全部内容了,希望大家能够喜欢。

本文给大家享用的是运用javascript落成的二个大致的三级联合浮动菜单,特别轻易实用,有须求的伴儿过来参谋下呢。...

帮客商讨

本文由财神道app下载最新版本发布于web前端,转载请注明出处:JS制作简单的三级联动