基于MVC方式实现三级联动(JavaScript)_网络技术_宿州市腾雀网络科技有限公司

基于MVC方式实现三级联动(JavaScript)

发布时间 - 2026-01-10 22:44:29 点击率：次

本文实例为大家分享了基于MVC三级联动的具体代码，供大家参考，具体内容如下

Html代码：

<div class="box">
  <select class="make">
    <option>请选择品牌</option>
  </select>
  <select class="model">
    <option>请选择车型</option>
  </select>
  <select class="car">
    <option>请选择车款</option>
  </select>
</div>

js代码：

<script src="jquery-1.8.3.min.js"></script>
<script src="car.make.js"></script>
<script src="car.car.js"></script>
<script src="car.model.js"></script>
<script>
  //MVC与OOP模式
  /*
  * mvc编程思想
  * model  模型 （数据）
  * controller  控制器
  * view  视图
  * 下拉事件  由控制器处理
  * 获取数据  由模型处理
  * 数据的显示 由视图处理
  * 控制器  发布指令  调用模型获取数据
  *
  * 控制器拿到数据后发布指令将数据交给视图进行显示
  *
  *
  * */

  //定义一个控制器对象
  var ctrl={
    //初始化函数
    init:function(){
      this.createBrand();
    },
    //品牌函数
    createBrand:function(){

      //调用模型获取数据
      var data=model.getBrand();

      //将数据交给视图去渲染(显示)
      view.showBrand(data);

      this.createModel();
      this.brandChange();
      this.modelChange();
    },
    //车型函数
    createModel:function(){

      var id=$('.make').val();
      var data=model.getModel(id);
      view.showModel(data);
      this.createCar();
    },
    //车款函数
    createCar:function(){

      var id=$('.model').val();
      var data=model.getCar(id);
      view.showCar(data);
    },
    //品牌点击函数
    brandChange:function(){

      $('.make').change(function(){
        ctrl.createModel();
      })
    },
    //车型点击函数
    modelChange:function(){

      $('.model').change(function(){
        ctrl.createCar();
      })
    }
  };

  //定义一个模型对象
  var model={
    //获取第一个数据
    getBrand:function(){

      return car_make;
    },
    //获取第二个数据
    getModel:function(id){

      return car_model[id];
    },
    //获取第三个数据
    getCar:function(id){

      return car_car[id];
    }
  };

  //定义一个视图对象
  var view={
    //下拉列表
    createSelect:function(title,data,element){

      var html='<option>'+title+'</option>';
      $.each(data,function(){

        html+='<option value="'+this.id+'">'+this.name+'</option>'
      });

      element.html(html);

      element.children().eq(1).attr('selected',true);
    },
    //品牌
    showBrand:function(data){

      this.createSelect('请选择品牌',data,$('.make'));
    },
    //车型
    showModel:function(data){

      this.createSelect('请选择车型',data,$('.model'));
    },
    //车款
    showCar:function(data){

      this.createSelect('请选择车款',data,$('.car'));
    }
  };

  ctrl.init();

</script>

最终显示效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# MVC # 三级联动 # 详解ASP.NET MVC之下拉框绑定四种方式 # ASP.NET MVC下拉框联动实例解析 # asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常 # 基于MVC3方式实现下拉列表联动(JQuery) # Spring MVC中Ajax实现二级联动的简单实例 # MVC实现下拉框联动效果（单选） # 请选择 # 第二个 # 大家分享 # 具体内容 # 大家多多 # 显示效果 # jquery # src # car # js # script # min # var # ctrl # init # view # OOP

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Swoole进阶：使用多线程提高并发能力

下一篇：为什么越来越多的人选择使用云主机来构建他们的网站？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Swoole进阶：使用多线程提高并发能力

下一篇：为什么越来越多的人选择使用云主机来构建他们的网站？