JQuery特效之五----三级联动菜单

最新推荐文章于 2024-07-26 03:31:50 发布

原创最新推荐文章于 2024-07-26 03:31:50 发布 · 566 阅读

1 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

85 篇文章

订阅专栏

本文深入探讨了HTML、CSS和JavaScript在网页开发中的应用，通过一个三级联动选择器的实例，展示了如何使用jQuery进行DOM操作，实现省份、城市、县区的动态加载，体现了前端技术在交互性和用户体验上的关键作用。

前端三大组成

html构建内容，css美化，js控制交互，jquery是一个常用js库。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
</head>
<body>
    
    
    <div>
        <select name="selProvince" id="selProvince">
            <option value="">---请选择省份---</option>            
        </select>
        <select name="selCity" id="selCity">
            <option value="">---请选择市---</option>            
        </select>
        <select name="selCountry" id="selCountry">
            <option value="">---请选择县---</option>            
        </select>
        
    </div>
    
    
    <script src="static/lib/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="static/js/sanji.js"></script>
</body>
</html>

js：

var iNum1;
var iNum2;
var aProvince = ['湖北','江苏','安徽'];
var aCity =[['武汉','黄冈','荆门'],['南京','无锡','镇江'],['合肥','安庆','黄山']];
var aCountry =[[['武汉1','武汉2'],['黄冈1','黄冈2'],['荆门1','荆门2']],[['南京1','南京2'],['无锡1','无锡2'],['镇江1','镇江2']],[['合肥1','合肥2'],['安庆1','安庆2'],['黄山1','黄山2']]];
$(function(){

    for(var i=0;i<aProvince.length;i++){
         $('#selProvince').append('<option>'+aProvince[i]+'</option>');
     }
    $('#selProvince').change(function () {
         $('#selCity').children().not(':eq(0)').remove();
        $('#selCountry').children().not(':eq(0)').remove();
         iNum1 = $(this).children('option:selected').index();
         var aaCity = aCity[iNum1-1];
         for(var j=0;j<aaCity.length;j++){
             $('#selCity').append('<option>'+aaCity[j]+'</option>');
         }
     });
    
    $('#selCity').change(function () {
         $('#selCountry').children().not(':eq(0)').remove();
         iNum2 = $(this).children('option:selected').index();
         var aaCountry = aCountry[iNum1-1][iNum2-1];
         for(var k=0;k<aaCountry.length;k++){
             $('#selCountry').append('<option>'+aaCountry[k]+'</option>');
         }
     });
});