自己做的三级联动

原创 2019-05-12 16:00:23 269
摘要:<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script type="text/javascript" src="/plugins/jquery-3.3.1.min.js"></script>
   <title>三级联动</title>
</head>
<body>
省<select name="provice" id="provice">
</select>

<script type="text/javascript">
       $.getJSON('1.json',function(data){
           var options="<option value=‘’>请选择</option>";
           $.each(data,function(i){
               options+='<option value='+data[i].proId+'>'+data[i].proName+'</option>';
           });
           $('#provice').html(options);

       });

       $('#provice').change(function(){

           $.getJSON('2.json',function(data){
               var options="<option value=‘’>请选择</option>";
               var test=$('#provice').val();
               $.each(data,function(i){
                  if(test==data[i].proId)
                  {
                      options+='<option value='+data[i].cityId+'>'+data[i].cityName+'</option>';
                  }
               })
               $('#provice').after('市<select name="city" id="city"></select>').next().html(options);


           });

       })
</script>
</body>
</html>

批改老师:查无此人批改时间:2019-05-13 09:15:23
老师总结:完成的不错。三级联动菜单非常实用,分层次加载,让程序更快。继续加油。

发布手记

热门词条