`
icedcoco
  • 浏览: 38618 次
社区版块
存档分类
最新评论

下拉菜单多选

阅读更多
可以尝试用多选下拉列表,这样不会破坏样式,比较好,你觉得呢,
这是多选的代码,我参考别人的
Ext.form.MultiComboBox = Ext.extend(Ext.form.TriggerField, {
    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
    listClass: '',
    selectedClass: 'x-combo-selected',
    triggerClass : 'x-form-arrow-trigger',
    shadow:'sides',
    listAlign: 'tl-bl?',
    maxHeight: 300,
    triggerAction: 'query',
    minChars : 4,
    typeAhead: false,
    queryDelay: 500,
    pageSize: 0,
    selectOnFocus:false,
    queryParam: 'query',
    loadingText: 'Loading...',
    resizable: false,
    handleHeight : 8,
    editable: true,
    allQuery: '',
    mode: 'remote',
    minListWidth : 70,
    forceSelection:false,
    typeAheadDelay : 250,
    displaySeparator:';',
    valueSeparator:',',
    lazyInit : true,

    initComponent : function(){
        Ext.form.ComboBox.superclass.initComponent.call(this);
        this.addEvents(
            'expand',
            'collapse',
            'beforeselect',
            'select',
            'beforequery'
        );
        if(this.transform){
            this.allowDomMove = false;
            var s = Ext.getDom(this.transform);
            if(!this.hiddenName){
                this.hiddenName = s.name;
                alert(this.hiddenName);
            }
            if(!this.store){
                this.mode = 'local';
                var d = [], opts = s.options;
                for(var i = 0, len = opts.length;i < len; i++){
                    var o = opts[i];
                    var value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
                    if(o.selected) {
                        this.value = value;
                    }
                    d.push([value, o.text]);
                }
                this.store = new Ext.data.SimpleStore({
                    'id': 0,
                    fields: ['value', 'text'],
                    data : d
                });
                this.valueField = 'value';
                this.displayField = 'text';
            }
            s.name = Ext.id(); // wipe out the name in case somewhere else they have a reference
            if(!this.lazyRender){
                this.target = true;
                this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
                Ext.removeNode(s); // remove it
                this.render(this.el.parentNode);
            }else{
                Ext.removeNode(s); // remove it
            }

        }
        this.selectedIndex = -1;
        if(this.mode == 'local'){
            if(this.initialConfig.queryDelay === undefined){
                this.queryDelay = 10;
            }
            if(this.initialConfig.minChars === undefined){
                this.minChars = 0;
            }
        }
    },

    // private
    onRender : function(ct, position){
        Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
        var disValue="";
        if(this.hiddenName){
            this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
                    'before', true);
          var hvalue=this.hiddenValue !== undefined ? this.hiddenValue :
                this.value !== undefined ? this.value : '';
          var hvalueArray=hvalue.split(this.valueSeparator);
         
          for(var i=0;i<this.store.data.length;i++){
            var r = this.store.getAt(i);  
            var newValue = r.data[this.displayField];
              var v=r.data[this.valueField];
              for(var j=0;j<hvalueArray.length;j++){
              if(hvalueArray[j]==v){
              disValue+=newValue+this.displaySeparator;
              }
              }
           
          }    
            this.hiddenField.value =this.hiddenValue !== undefined ? this.hiddenValue :
                this.value !== undefined ? this.value : '';
            this.el.dom.removeAttribute('name');
        }
        if(Ext.isGecko){
            this.el.dom.setAttribute('autocomplete', 'off');
        }

        if(!this.lazyInit){
            this.initList();
        }else{
            this.on('focus', this.initList, this, {single: true});
        }

        if(!this.editable){
            this.editable = true;
            this.setEditable(false);
        }
        this.setValue(disValue);
    },

    initList : function(){
        if(!this.list){
            var cls = 'x-combo-list';

            this.list = new Ext.Layer({
                shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
            });

            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
            this.list.setWidth(lw);
            this.list.swallowEvent('mousewheel');
            this.assetHeight = 0;

            if(this.title){
                this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
                this.assetHeight += this.header.getHeight();
            }

            this.innerList = this.list.createChild({cls:cls+'-inner'});
            this.innerList.on('mouseover', this.onViewOver, this);
            this.innerList.on('mousemove', this.onViewMove, this);
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'))

            if(this.pageSize){
                this.footer = this.list.createChild({cls:cls+'-ft'});
                this.pageTb = new Ext.PagingToolbar({
                    store:this.store,
                    pageSize: this.pageSize,
                    renderTo:this.footer
                });
                this.assetHeight += this.footer.getHeight();
            }

            if(!this.tpl){
            //alert(cls);
            //x-combo-list-item
                this.tpl = '<tpl for="."><div class="'+cls+'-item"><span class="unchecked" id="checkBox_{' + this.displayField + '}"+ width="20">&nbsp;&nbsp;&nbsp;&nbsp;</span>{' + this.displayField + '}</div></tpl>';
            }
            this.view = new Ext.DataView({
                applyTo: this.innerList,
                tpl: this.tpl,
                singleSelect: true,
                selectedClass: this.selectedClass,
                itemSelector: this.itemSelector || '.' + cls + '-item'
            });

            this.view.on('click', this.onViewClick, this);

            this.bindStore(this.store, true);

            if(this.resizable){
                this.resizer = new Ext.Resizable(this.list,  {
                   pinned:true, handles:'se'
                });
                this.resizer.on('resize', function(r, w, h){
                    this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
                    this.listWidth = w;
                    this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
                    this.restrictHeight();
                }, this);
                this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
            }
        }
    },

    bindStore : function(store, initial){
        if(this.store && !initial){
            this.store.un('beforeload', this.onBeforeLoad, this);
            this.store.un('load', this.onLoad, this);
            this.store.un('loadexception', this.collapse, this);
            if(!store){
                this.store = null;
                if(this.view){
                    this.view.setStore(null);
                }
            }
        }
        if(store){
            this.store = Ext.StoreMgr.lookup(store);

            this.store.on('beforeload', this.onBeforeLoad, this);
            this.store.on('load', this.onLoad, this);
            this.store.on('loadexception', this.collapse, this);

            if(this.view){
                this.view.setStore(store);
            }
        }
    },

    // private
    initEvents : function(){
        Ext.form.ComboBox.superclass.initEvents.call(this);

        this.keyNav = new Ext.KeyNav(this.el, {
            "up" : function(e){
                this.inKeyMode = true;
                this.selectPrev();
            },

            "down" : function(e){
                if(!this.isExpanded()){
                    this.onTriggerClick();
                }else{
                    this.inKeyMode = true;
                    this.selectNext();
                }
            },

            "enter" : function(e){
                this.onViewClick();
                //return true;
            },

            "esc" : function(e){
                this.collapse();
            },

            "tab" : function(e){
                this.onViewClick(false);
                return true;
            },

            scope : this,

            doRelay : function(foo, bar, hname){
                if(hname == 'down' || this.scope.isExpanded()){
                   return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
                }
                return true;
            },

            forceKeyDown : true
        });
        this.queryDelay = Math.max(this.queryDelay || 10,
                this.mode == 'local' ? 10 : 250);
        this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
        if(this.typeAhead){
            this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
        }
        if(this.editable !== false){
            this.el.on("keyup", this.onKeyUp, this);
        }
        if(this.forceSelection){
            this.on('blur', this.doForce, this);
        }
    },

    onDestroy : function(){
        if(this.view){
            this.view.el.removeAllListeners();
            this.view.el.remove();
            this.view.purgeListeners();
        }
        if(this.list){
            this.list.destroy();
        }
        this.bindStore(null);
        Ext.form.ComboBox.superclass.onDestroy.call(this);
    },

    // private
    fireKey : function(e){
        if(e.isNavKeyPress() && !this.list.isVisible()){
            this.fireEvent("specialkey", this, e);
        }
    },

    // private
    onResize: function(w, h){
        Ext.form.ComboBox.superclass.onResize.apply(this, arguments);
        if(this.list && this.listWidth === undefined){
            var lw = Math.max(w, this.minListWidth);
            this.list.setWidth(lw);
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
        }
    },

    // private
    onDisable: function(){
        Ext.form.ComboBox.superclass.onDisable.apply(this, arguments);
        if(this.hiddenField){
            this.hiddenField.disabled = this.disabled;
        }
    },
    setEditable : function(value){
        if(value == this.editable){
            return;
        }
        this.editable = value;
        if(!value){
            this.el.dom.setAttribute('readOnly', true);
            this.el.on('mousedown', this.onTriggerClick,  this);
            this.el.addClass('x-combo-noedit');
        }else{
            this.el.dom.setAttribute('readOnly', false);
            this.el.un('mousedown', this.onTriggerClick,  this);
            this.el.removeClass('x-combo-noedit');
        }
    },

    // private
    onBeforeLoad : function(){
        if(!this.hasFocus){
            return;
        }
        this.innerList.update(this.loadingText ?
               '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
        this.restrictHeight();
        this.selectedIndex = -1;
    },

    // private
    onLoad : function(){
        if(!this.hasFocus){
            return;
        }
        if(this.store.getCount() > 0){
            this.expand();
            this.restrictHeight();
            if(this.lastQuery == this.allQuery){
                if(this.editable){
                    this.el.dom.select();
                }
                if(!this.selectByValue(this.value, true)){
                    this.select(0, true);
                }
            }else{
                this.selectNext();
                if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
                    this.taTask.delay(this.typeAheadDelay);
                }
            }
        }else{
            this.onEmptyResults();
        }
    },

    // private
    onTypeAhead : function(){
        if(this.store.getCount() > 0){
            var r = this.store.getAt(0);
            var newValue = r.data[this.displayField];
            var len = newValue.length;
            var selStart = this.getRawValue().length;
            if(selStart != len){
                this.setRawValue(newValue);
                this.selectText(selStart, newValue.length);
            }
        }
    },
    // private
    onSelect : function(record, index){
        if(this.fireEvent('beforeselect', this, record, index) !== false){
            var r = this.store.getAt(index);
            var newValue = r.data[this.displayField];
            var check=document.getElementById("checkBox_"+newValue);
            if(check.className=="checked"){
            check.className="unchecked"
            }else{
            check.className="checked"
            }
            var value="";
            var hiddenValue="";
            for(var i=0;i<this.store.data.length;i++){
            var r = this.store.getAt(i);  
            newValue = r.data[this.displayField];
            check=document.getElementById("checkBox_"+newValue);
            if(check.className=="checked"){
            value+= r.data[this.displayField]+this.displaySeparator;
            hiddenValue+= r.data[this.valueField]+this.valueSeparator;
            }
            }
            if(value.length>1){
            value=value.substring(0,value.length-this.displaySeparator.length);
            }
            if(hiddenValue.length>1){
            hiddenValue=hiddenValue.substring(0,value.length-this.valueSeparator.length);
            }
            this.setValue(value);
            this.hiddenField.value=hiddenValue;
            this.fireEvent('select', this, record, index);
        }
    },
    getValue : function(){
        if(this.valueField){
            return typeof this.value != 'undefined' ? this.value : '';
        }else{
            return Ext.form.ComboBox.superclass.getValue.call(this);
        }
    },

    /**
     * Clears any text/value currently set in the field
     */
    clearValue : function(){
        if(this.hiddenField){
            this.hiddenField.value = '';
        }
        this.setRawValue('');
        this.lastSelectionText = '';
        this.applyEmptyText();
    },
    setValue : function(v){
        var text = v;
        if(this.valueField){
            var r = this.findRecord(this.valueField, v);
            if(r){
                text = r.data[this.displayField];
            }else if(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
    },

    // private
    findRecord : function(prop, value){
        var record;
        if(this.store.getCount() > 0){
            this.store.each(function(r){
                if(r.data[prop] == value){
                    record = r;
                    return false;
                }
            });
        }
        return record;
    },

    // private
    onViewMove : function(e, t){
        this.inKeyMode = false;
    },

    // private
    onViewOver : function(e, t){
        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
            return;
        }
        var item = this.view.findItemFromChild(t);
        if(item){
            var index = this.view.indexOf(item);
            this.select(index, false);
        }
    },

    // private
    onViewClick : function(doFocus){
        var index = this.view.getSelectedIndexes()[0];
        var r = this.store.getAt(index);
        if(r){
            this.onSelect(r, index);
        }
        if(doFocus !== false){
            this.el.focus();
        }
    },

    // private
    restrictHeight : function(){
        this.innerList.dom.style.height = '';
        var inner = this.innerList.dom;
        var fw = this.list.getFrameWidth('tb');
        var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
        this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
        this.list.beginUpdate();
        this.list.setHeight(this.innerList.getHeight()+fw+(this.resizable?this.handleHeight:0)+this.assetHeight);
        this.list.alignTo(this.el, this.listAlign);
        this.list.endUpdate();
    },

    // private
    onEmptyResults : function(){
        this.collapse();
    },

    /**
     * Returns true if the dropdown list is expanded, else false.
     */
    isExpanded : function(){
        return this.list && this.list.isVisible();
    },
    selectByValue : function(v, scrollIntoView){
        if(v !== undefined && v !== null){
            var r = this.findRecord(this.valueField || this.displayField, v);
            if(r){
                this.select(this.store.indexOf(r), scrollIntoView);
                return true;
            }
        }
        return false;
    },
    select : function(index, scrollIntoView){
   
        this.selectedIndex = index;
        this.view.select(index);
        if(scrollIntoView !== false){
            var el = this.view.getNode(index);
            if(el){
                this.innerList.scrollChildIntoView(el, false);
            }
        }
    },

    // private
    selectNext : function(){
        var ct = this.store.getCount();
        if(ct > 0){
            if(this.selectedIndex == -1){
                this.select(0);
            }else if(this.selectedIndex < ct-1){
                this.select(this.selectedIndex+1);
            }
        }
    },

    // private
    selectPrev : function(){
        var ct = this.store.getCount();
        if(ct > 0){
            if(this.selectedIndex == -1){
                this.select(0);
            }else if(this.selectedIndex != 0){
                this.select(this.selectedIndex-1);
            }
        }
    },

    // private
    onKeyUp : function(e){
        if(this.editable !== false && !e.isSpecialKey()){
            this.lastKey = e.getKey();
            this.dqTask.delay(this.queryDelay);
        }
    },

    // private
    validateBlur : function(){
        return !this.list || !this.list.isVisible();  
    },

    // private
    initQuery : function(){
        this.doQuery(this.getRawValue());
    },

    // private
    doForce : function(){
        if(this.el.dom.value.length > 0){
            this.el.dom.value =
                this.lastSelectionText === undefined ? '' : this.lastSelectionText;
            this.applyEmptyText();
        }
    },
    doQuery : function(q, forceAll){
        if(q === undefined || q === null){
            q = '';
        }
        var qe = {
            query: q,
            forceAll: forceAll,
            combo: this,
            cancel:false
        };
        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
            return false;
        }
        q = qe.query;
        forceAll = qe.forceAll;
        if(forceAll === true || (q.length >= this.minChars)){
            if(this.lastQuery !== q){
                this.lastQuery = q;
                if(this.mode == 'local'){
                    this.selectedIndex = -1;
                    if(forceAll){
                        this.store.clearFilter();
                    }else{
                        this.store.filter(this.displayField, q);
                    }
                    this.onLoad();
                }else{
                    this.store.baseParams[this.queryParam] = q;
                    this.store.load({
                        params: this.getParams(q)
                    });
                    this.expand();
                }
            }else{
                this.selectedIndex = -1;
                this.onLoad();  
            }
        }
    },

    // private
    getParams : function(q){
        var p = {};
        //p[this.queryParam] = q;
        if(this.pageSize){
            p.start = 0;
            p.limit = this.pageSize;
        }
        return p;
    },
    /**
     * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
     */
    collapse : function(){
        if(!this.isExpanded()){
            return;
        }
        this.list.hide();
        Ext.getDoc().un('mousewheel', this.collapseIf, this);
        Ext.getDoc().un('mousedown', this.collapseIf, this);
        this.fireEvent('collapse', this);
    },
    // private
    collapseIf : function(e){
        if(!e.within(this.wrap) && !e.within(this.list)){
            this.collapse();
        }
    },
   
    /**
     * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
     */
    expand : function(){
        if(this.isExpanded() || !this.hasFocus){
            return;
        }
        this.list.alignTo(this.wrap, this.listAlign);
        var hvalueArray=this.hiddenField.value.split(this.valueSeparator);
        for(var i=0;i<this.store.data.length;i++){
        var r = this.store.getAt(i);  
        var newValue = r.data[this.displayField];
          var v=r.data[this.valueField];
          for(var j=0;j<hvalueArray.length;j++){
          if(hvalueArray[j]==v){
          document.getElementById("checkBox_"+newValue).className="checked";
          }
          }
       
        }
        this.list.show();
        Ext.getDoc().on('mousewheel', this.collapseIf, this);
        Ext.getDoc().on('mousedown', this.collapseIf, this);
        this.fireEvent('expand', this);
    },
    // private
    // Implements the default empty TriggerField.onTriggerClick function
    onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        if(this.isExpanded()){
            this.collapse();
            this.el.focus();
        }else {
            this.onFocus({});
            if(this.triggerAction == 'all') {
                this.doQuery(this.allQuery, true);
            } else {
                this.doQuery(this.getRawValue());
            }
            this.el.focus();
        }
    }
});
Ext.reg('multicombo', Ext.form.MultiComboBox);
leonelwong (架构师) 2009-01-13
楼上辛苦啦哈。嘿嘿。
379548695 (中级程序员) 2009-01-14
=.=能具体说下现在在什么地方么?
我也遇到过跟你一样的问题,不过我的是要现实在一个新弹出的WINDOW中,所以我用的是让后台根据数据库操作结果返回一段HTML代码填充过去.
在页面上也可以这么解决,不过这样是比较偷懒比较粗糙的解决办法.
但是想象JSP那样用循环输出,我去EXT的官网查过,得到的结果是目前EXT自己本身是不支持的.他们的建议和楼上那个贴代码的大大一样,是用COMBOBOX解决
分享到:
评论

相关推荐

    Spinner下拉菜单多选 MultiSelectionSpinner

    Spinner下拉菜单多选,在布局xml文件直接作为控件使用,在activity里面调用就行了

    android studio,demo,Spinner下拉菜单多选的实现

    在Android开发中,Spinner是一个非常常见的控件,它通常用于展示一个下拉列表供用户选择。本教程将详细讲解如何在Android Studio 3.0.1环境下实现Spinner的多选功能,这对于创建交互式用户界面非常有用。 首先,...

    angular2-multiselect-dropdown, Angular 2下拉菜单多选.zip

    angular2-multiselect-dropdown, Angular 2下拉菜单多选 Angular2多选下拉菜单 Angular 2用于网络应用程序的多功能下拉菜单。 易于集成和使用。 文档| 演示/示例。 table-内容 1开始启动 。 安装 3使用 。 模板 5...

    js css3下拉城市菜单多选代码.rar

    总的来说,"js css3下拉城市菜单多选代码"是一个综合运用了HTML、CSS3和JavaScript技术的实例,展示了如何创建一个功能齐全、交互性强的下拉菜单,并且支持多选功能。理解并掌握这些技术对于前端开发者来说是至关...

    可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo

    这种组件通常包含一个可展开的下拉菜单,用户可以在其中勾选多个选项。与传统的单选下拉列表相比,多选下拉列表允许用户同时选择多个值,极大地提高了用户体验和效率。 3. **复选下拉列表**: 复选下拉列表通常...

    c#winform下拉多选自定义控件(带全选)

    在C# WinForm开发中,有时我们需要创建具有更...这样,我们就创建了一个具备全选/全取消功能的C# WinForm下拉多选自定义控件。这个控件可以方便地集成到各种WinForm应用程序中,提高开发效率,提供更好的用户交互体验。

    PB多选下拉框

    【PB多选下拉框】是一种在PowerBuilder(PB)应用程序中实现的用户界面组件,它允许用户在下拉菜单中选择多个选项。PB90指的是PowerBuilder 9.0版本,这是一款由Sybase公司(现已被SAP收购)开发的可视化编程工具,...

    combobox实现下拉框多选

    本方法和用checkbox, listbox等控件和事件拼凑出来的不同,本方法是一个集成的独立控件,基本实现了控件的顺滑度,下拉框可悬浮等效果,可以认为是comboBox的升级版,使用方便,仅需引用编译好的DLL,直接在toolBox...

    ASP.NET下拉多选框控件

    ASP.NET下拉多选框控件,内含源码,说明文档,实例。ASP.NET下拉多选框控件,内含源码,说明文档,实例。Creates a multi selection check box group which is displayed and hidden on the client through the use ...

    使用bootstrap实现多选下拉框

    在Bootstrap中实现多选下拉框可以极大提升用户体验,使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先,确保你已经在你的项目中引入了Bootstrap的相关资源。...

    下拉多选菜单jquery代码

    在"下拉多选菜单jquery代码"中,核心概念是HTML的`&lt;select&gt;`元素和`&lt;option&gt;`元素,它们构建了基本的下拉菜单结构。`&lt;select&gt;`元素定义了一个下拉列表,而`&lt;option&gt;`元素则表示列表中的各个选项。要实现多选功能,...

    tkinter自定义多选下拉列表框(带滚动条,全选)

    本篇文章将深入探讨如何使用`tkinter`来实现一个自定义的多选下拉列表框,该列表框具备滚动条功能以及全选选项。这在创建复杂的用户界面时尤其有用,因为它提供了更好的用户体验和更丰富的交互性。 首先,我们要...

    jQuery Select下拉框分类菜单多选插件

    这款插件不仅提供了分门别类的下拉菜单,还集成了搜索功能,使得用户在处理大量选项时能够更加便捷地进行多选操作。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。...

    js+css3制作下拉城市菜单多选代码.zip

    【标题】"js+css3制作下拉城市菜单多选代码.zip"的资源是一个结合JavaScript和CSS3技术实现的交互式下拉城市菜单的代码示例。这种菜单通常用于网站中,让用户能够方便地选择他们所在的城市或者感兴趣的地区,且支持...

    .net中实现多选下拉菜单(很容易学懂)

    本教程将引导初学者理解如何创建并使用这样的多选下拉菜单,让你轻松掌握这一功能。 一、ASP.NET ListBox控件 1. **添加控件**:在ASP.NET页面中,我们可以通过拖拽工具箱中的ListBox控件到设计视图,或在代码中...

    jQuery自定义下拉分类多选代码.zip

    本文将深入探讨“jQuery自定义下拉分类多选代码”这个主题,帮助开发者了解如何创建一个功能丰富的下拉菜单,实现分类选择和搜索功能。 首先,我们来看“jQuery Select”。在网页开发中,`&lt;select&gt;`元素常用于创建...

    下拉列表多选

    在网页设计中,"下拉列表多选"是一种常见的用户交互元素,允许用户在下拉菜单中选择一个或多个选项。这种功能在许多网站和应用中都有应用,比如表单填写、设置配置等场景。本项目是针对这个功能进行了一些自定义的...

    jquery 多选下拉框实例

    在这个"jQuery 多选下拉框实例"中,我们关注的是如何在HTML的下拉选择框(`&lt;select&gt;`元素)中实现多选功能,并且每个选项前都有一个复选框供用户进行选择。 1. **多选下拉框基础**: - 在HTML中,`&lt;select&gt;`元素...

    下拉条件多选插件jQuery特效下载

    标题中的“下拉条件多选插件jQuery特效下载”指的是一个基于jQuery库的特定功能,即创建具有条件筛选和多选功能的下拉菜单。在网页设计和开发中,这样的插件可以提升用户体验,使用户在有限的空间内方便地进行多选项...

    多选下拉菜单控件(HTML)

    **一、多选下拉菜单的概念** 在HTML中,`&lt;select&gt;`元素用于创建下拉菜单。默认情况下,`&lt;select&gt;`只允许用户选择一个选项。但通过添加`multiple`属性,我们可以将其转变为多选下拉菜单。例如: ```html ...

Global site tag (gtag.js) - Google Analytics