源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

用prototype实现的简单小巧的多级联动菜单

  • 时间:2020-02-12 20:04 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:用prototype实现的简单小巧的多级联动菜单
使用prototype.js这个js库,这个在网上一搜就能找到了,是一个开源的js函数库。  看到今天贴了几个联动菜单的帖子 这个应该大家都有各自比较好的代码了 我也顺手贴一个我们team里面用的比较小巧的代码 // author: downpour    var DoubleCombo = Class.create();    DoubleCombo.prototype = {      initialize: function(source, target, ignore, url, options, excute) {        this.source = $(source);        this.target = $(target);        this.ignore = $A(ignore);        this.url = url;        this.options = $H(options);        this.source.onchange = this.doChange.bindAsEventListener(this);        if(excute) {            this.doChange();        }      },      doChange: function() {        if(this.source.value != '') {            // first clear the ignore ones            this.ignore.each(                function(value) {                    $(value).options.length = 1;                    $(value).options[0].selected = 'selected';                }            );            // create parameter for ajax            var query = $H({ id: this.source.value });            var parameters = {                method: 'post',                 parameters: $H(this.options).merge(query).toQueryString(),                 onComplete: this.getResponse.bindAsEventListener(this)            }            var locationRequest = new Ajax.Request( this.url, parameters );        }      },      getResponse: function(request) {        this.target.options.length = 1;        this.target.options[0].selected = 'selected';        var response = $A(request.responseText.trim().split(';'));        response.length--;        for(var i = 0; i < response.length; i++) {            var optionParam = response[i].split(',');            this.target.options[this.target.options.length] = new Option(optionParam[1], optionParam[0]);        }      }    }   简单说一下几个参数吧:  source 第一级菜单 target 联动菜单 ignore 当有时候3级联动时,例如 国家 省 市 例如上海没有省的,可以忽略第3级菜单 url action url options action参数 excute 是否联动 拿比较常见的例子来看 国家 省 市 3级联动来作为例子 代码 <html-el:select property="country" styleId="country" >       <html-el:options collection="countries" property="id" labelProperty="name" />   </html-el:select>   <html-el:select property="province" styleId="province">       <option value="">--Please Select--</option>            ................    </html-el:select>   <html-el:select property="city" styleId="city">       <option value="">--Please Select--</option>            ................    </html-el:select>   <script type="text/javascript">       new DoubleCombo('country', 'province', null, '<c:url value="/xxxx.do?combo=true"></c:url>', {});    <script type="text/javascript">       new DoubleCombo('province', 'city', null, '<c:url value="/xxxx.do?combo=true"></c:url>', {}); 
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部