精华内容
下载资源
问答
  • 下面给大家介绍一款集下拉搜索多选框下拉单选框与一体的bootstrap组件Bootstrap-select,bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能,多选功能,搜索功能,自定义...

    下面给大家介绍一款集下拉搜索多选框,下拉单选框与一体的bootstrap组件Bootstrap-select,bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能,多选功能,搜索功能,自定义内容和图标等多种功能,非常强大。实现效果如下。

    一、使用方法

    在页面中引入jquery和bootstrap相关文件,以及bootstrap-select.js和bootstrap-select.css文件。

    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">
    
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-select.css">
    
    <link href="css/jquery.min.css" rel="stylesheet">
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <link href="css/bootstrap-select.css" rel="stylesheet">

    二、具体用法

    带分组的下拉选择框(Select boxes with optgroups)

    <select class="selectpicker">

      <optgroup label="Picnic">

        <option>Mustard</option>

        <option>Ketchup</option>

        <option>Relish</option>

      </optgroup>

      <optgroup label="Camping">

        <option>Tent</option>

        <option>Flashlight</option>

        <option>Toilet Paper</option>

      </optgroup>

    </select>

    多选下拉框(Multiple select boxes)

    <select class="selectpicker" multiple>

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>  

    带搜索功能的下拉框(Live search)

    <select class="selectpicker" multiple>

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>

    关键词(Key words)

    <select class="selectpicker" data-live-search="true">

      <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>

      <option data-tokens="mustard">Burger, Shake and a Smile</option>

      <option data-tokens="frosting">Sugar, Spice and all things nice</option>

    </select>  

    限制选择的数量(Limit the number of selections)

    <select class="selectpicker" multiple data-max-options="2">

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>

     

    <select class="selectpicker" multiple>

      <optgroup label="Condiments" data-max-options="2">

        <option>Mustard</option>

        <option>Ketchup</option>

        <option>Relish</option>

      </optgroup>

      <optgroup label="Breads" data-max-options="2">

        <option>Plain</option>

        <option>Steamed</option>

        <option>Toasted</option>

      </optgroup>

    </select>

    自定义占位文本(Placeholder)

    <select class="selectpicker" multiple title="请选择内容。。">

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>  

    替换文本(Selected text)

    <select class="selectpicker">

      <option title="Combo 1">Hot Dog, Fries and a Soda</option>

      <option title="Combo 2">Burger, Shake and a Smile</option>

      <option title="Combo 3">Sugar, Spice and all things nice</option>

    </select

    多选下拉框的显示格式(Selected text format)

    通过data-selected-text-format属性,可以指定在多选下拉框选择选项后的显示格式。支持的属性有:

    • values:用逗号分隔选择项。(默认)
    • count:当选项等于一个时,显示选择选项的数量。
    • count > x:当选项大于某个数值时,从显示逗号分隔的多个值改为显示选择的数量。
    • static:总是显示选择的替换文本。

    <select class="selectpicker" multiple data-selected-text-format="count">

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>

     

    <select class="selectpicker" multiple data-selected-text-format="count > 3">

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

      <option>Onions</option>

    </select

    按钮样式(Button classes)

    通过data-style属性来为下拉框设置情景样式。

    <select class="selectpicker" data-style="btn-primary">

      ...

    </select>

     

    <select class="selectpicker" data-style="btn-info">

      ...

    </select>

     

    <select class="selectpicker" data-style="btn-success">

      ...

    </select>

     

    <select class="selectpicker" data-style="btn-warning">

      ...

    </select>

     

    <select class="selectpicker" data-style="btn-danger">

      ...

    </select>

    勾选图标(Checkmark on selected option)

    在已经选择的选项上添加勾选图标。

    <select class="selectpicker show-tick">

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>  

    下拉框箭头(Menu arrow)

    为下拉框添加一个箭头。

    <select class="selectpicker show-menu-arrow">

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>  

    自定义分割线样式(Style individual options)

    可以自定义分割线样式。

    .special {

      font-weight: bold !important;

      color: #fff !important;

      background: #bc0000 !important;

      text-transform: uppercase;

    }

    <select class="selectpicker">

      <option>Mustard</option>

      <option class="special">Ketchup</option>

      <option style="background: #5cb85c; color: #fff;">Relish</option>

    </select>

    下拉框宽度(Width)

    可以自定义下拉框的宽度。

    <div class="row">

      <div class="col-xs-3">

        <div class="form-group">

          <select class="selectpicker form-control">

            <option>Mustard</option>

            <option>Ketchup</option>

            <option>Relish</option>

          </select>

        </div>

      </div>

    </div

    还可以通过data-width属性来设置下拉框的宽度。

    <select class="selectpicker" data-width="auto">

      ...

    </select>

    <select class="selectpicker" data-width="fit">

      ...

    </select>

    <select class="selectpicker" data-width="100px">

      ...

    </select>

    <select class="selectpicker" data-width="75%">

      ...

    </select>

    图标(Icons)

    可以通过data-icon属性来为选项设置一个图标。

    <select class="selectpicker">

      <option data-icon="glyphicon-heart">Mustard</option>

      <option data-icon="glyphicon-star">Ketchup</option>

      <option data-icon="glyphicon-paperclip">Relish</option>

    </select>

    自定义内容(Custom content)

    可以通过data-content属性来为选项插入HTML内容。

    <select class="selectpicker">

      <option data-content="<span class='label label-success'>Mustard</span>">Mustard</option>

      <option data-content="<span class='label label-info'>Ketchup</span>">Ketchup</option>

      <option data-content="<span class='label label-primary'>Relish</span>">Relish</option>

    </select>

    子文本(Subtext)

    可以通过data-size属性来为选项添加一个子描述文本。

    <select class="selectpicker" data-size="5">

      <option data-subtext="Heinz">Mustard</option>

      <option data-subtext="ok">Ketchup</option>

      <option data-subtext="hello">Relish</option>

    </select>

    菜单显示多少项(Menu size)

    菜单的尺寸默认为auto。如果设置菜单尺寸为false或0,则显示所有的菜单项。你可以通过data-size属性来设置指定的菜单尺寸。下面的菜单只显示2项。

    <select class="selectpicker" data-size="2">

      <option data-subtext="Heinz">Mustard</option>

      <option data-subtext="ok">Ketchup</option>

      <option data-subtext="hello">Relish</option>

    </select>

    全选或全不选(Select/deselect all options)

    通过data-actions-box="true"来对下拉框进行全选或全不选。

    <select class="selectpicker" multiple data-actions-box="true">

      <option data-subtext="Heinz">Mustard</option>

      <option data-subtext="ok">Ketchup</option>

      <option data-subtext="hello">Relish</option>

    </select>

    分隔线(Divider)

    通过data-divider="true"来设置下拉框的分隔线。

    <select class="selectpicker">

      <option>Mustard</option>

      <option data-divider="true"></option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>

    菜单头部(Menu header)

    通过data-header来设置下拉框设置一个菜单头选项。

    <select class="selectpicker" data-header="Select a condiment">

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>

    箭头方向(Dropup menu)

    通过.dropupclass来手动设置小箭头的方向为向上方向。

    <select class="selectpicker dropup">

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>

    禁用下拉框(Disabled select box)

    通过disabled属性来禁用下拉框。

    <select class="selectpicker" disabled>

      <option>Mustard</option>

      <option>Ketchup</option>

      <option>Relish</option>

    </select>

    禁用菜单项(Disabled options)

    通过为菜单项添加.disabled属性来禁用它。

    <select class="selectpicker disabled">

      <option>Mustard</option>

      <option disabled>Ketchup</option>

      <option>Relish</option>

    </select>

    禁用下拉框分组(Disabled option groups)

    通过为分组添加.disabled属性来禁用它。

    <select class="selectpicker test">

      <optgroup label="Picnic" disabled>

        <option>Mustard</option>

        <option>Ketchup</option>

        <option>Relish</option>

      </optgroup>

      <optgroup label="Camping">

        <option>Tent</option>

        <option>Flashlight</option>

        <option>Toilet Paper</option>

      </optgroup>

    </select>

     

     

    参考文档:

    http://www.htmleaf.com/jQuery/Form/201802134981.html

    http://www.htmleaf.com/Demo/201802134982.html

    https://github.com/snapappointments/bootstrap-select

    展开全文
  • 一行多列的下拉多选框

    千次阅读 2017-12-02 18:49:17
    一行多列的下拉多选框很简单的一行多列的下拉多选框,就当是学习编写jquery插件的例子,该例子依赖jquery相关js代码:/** * 下拉多选插件,支持一行显示过个input框,显示多行 * by liangsu */ (function($){ ...

    一行多列的下拉多选框

    很简单的一行多列的下拉多选框,就当是学习编写jquery插件的例子,该例子依赖jquery

    相关js代码:

    /**
     *  下拉多选插件,支持一行显示过个input框,显示多行
     *   by warhorse
     */
    (function($){
        "use strict";
    
        var SelectCheckBox = function(element, options){
            this.$element = $(element);
            this.options = $.extend({}, SelectCheckBox.DEFAULTS, options); //使用jQuery.extend 覆盖插件默认参数
    
            // 多选框的名称
            if(!this.options.inputName){
                this.options.inputName = this.$element.attr("name");
                if(!this.options.inputName){
                    this.options.inputName = this.$element.attr("id");
                    this.options.inputName = this.options.inputName;
                }
            }
    
            // 获取并转换list为数组,支持数组类型[{'code':1, 'name':'aa'}],支持字符串类型:"1:aa;2:bb",支持对象{1:'aa', 2:'bb'}
            if(!this.options.list){
                this.options.list = this.$element.attr("list");
            }
            if(this.options.list && !$.isArray(this.options.list)){ // 1:aa;2:bb
                var list = [];
                var listType = typeof this.options.list;
                if(listType === 'string'){
                    var entries = this.options.list.split(';');
                    for(var i = 0; entries && i < entries.length; i++){
                        var entry = entries[i];
                        var values = entry.split(":");
                        list.push({'code': values[0], 'name':values[1]});
                    }
    
                }else if(listType === 'object'){
                    for(var key in this.options.list){
                        list.push({'code': key, 'name':this.options.list[key]});
                    }
                }
                //
                this.options.list = list;
            }
    
            // 获取并转换data,支持数组类型[1,2,3],支持字符串类型:"1,2,3"
            if(!this.options.data){
                this.options.data = this.$element.attr("data");
            }
            if(this.options.data && !$.isArray(this.options.data)){
                this.options.data = this.options.data.split(',');
            }
    
        };
    
        SelectCheckBox.DEFAULTS = {
                list: null, // 支持数组类型[{'code':1, 'name':'aa'}],支持字符串类型:"1:aa;2:bb"
                data: '', // 支持数组类型[1,2,3],支持字符串类型:"1,2,3"
                col: 4, //默认一行4个
                formatter: null,
                seperator: ',',
                noneSelectedText: '请选择',
                width: 100,
                height: 100,
                onchange: null
        };
    
        SelectCheckBox.prototype.create = function () {
            var opts = this.options;
    
            // li的宽度百分比
            var liWidth = 100 / opts.col; 
            liWidth += '%';
    
            var width = this.$element.attr("width");
            if(!width){
                width = this.$element.width();
            }
    
            var lis = '';
            var title = ''; // 选中值对应的文字
            for(var i = 0; i < opts.list.length; i++){
                var entry = opts.list[i];
    
                var checked = false;
                for(var j = 0; opts.data && j < opts.data.length; j++){
                    if(entry['code'] == opts.data[j]){
                        checked = true;
                        title += entry['name'] + opts.seperator;
                    }
                }
    
                if(opts.formatter){
                    var inputHtml = opts.formatter.call(this, entry, checked);
                    lis += '<li align="left" style="width:'+liWidth+'">'+inputHtml+'</li>';
    
                }else{
                    var checkedStr = checked ? 'checked="checked"' : '';
                    lis += '<li align="left" style="width:'+liWidth+'"><label><input type="checkbox" name="'+opts.inputName+'" value="'+entry['code']+'" '+checkedStr+'/>'+entry['name']+'</label></li>';
                }
            }
    
            if(title){
                if(opts.seperator){
                    title = title.substring(0, title.length - opts.seperator.length);
                }
            }else{
                title = opts.noneSelectedText;
            }
    
            // 主要的html代码
            var div = '<div class="selectCheckbox" id="scb_'+opts.inputName+'" style="width:100%; height:100%;cursor:pointer;">'
                    +   '<div class="inputDiv" style="width:'+width+'px;overflow:hidden;">'
                    +     '<p>'+title+'</p>'
                    +   '</div>'
                    +   '<div class="selectDiv" style="position:absolute; width:'+width+'px; display: none;" >'
                    +     '<ul>'
                    +        lis
                    +     '</ul>'
                    +   '</div>'
                    +   '</div>';
    
            this.$element.append(div);
        };
    
        // 绑定事件
        SelectCheckBox.prototype.bindEvent = function(){
            var self = this;
            var $this = this.$element;
            var opts = this.options;
            // 绑定事件
            var inputDiv = $this.find(".inputDiv");
            var selecDiv = $this.find(".selectDiv");
            // 点击显示下拉框事件
            inputDiv.bind('click', function(){
                selecDiv.toggle();
            });
            // 鼠标离开选择面板隐藏下拉框事件
            $this.bind('mouseleave',function(){
                selecDiv.hide();
            });
            // 选择值后将选中的值显示在显示框上的事件
            selecDiv.find("input").bind('click',function(){
                self.fefresh();
            });
        };
    
        // 刷新显示
        SelectCheckBox.prototype.fefresh = function(){
            var self = this;
            var opts = this.options;
            var $this = this.$element;
            var data = [];
            var title = '';
            $this.find("input:checked").each(function(){
                title += $(this).parent("label").text() + opts.seperator;
                data.push($(this).val());
            });
    
            if(title){
                if(opts.seperator){
                    title = title.substring(0, title.length - opts.seperator.length);
                }
            }else{
                title = opts.noneSelectedText;
            }
    
            $this.find(".selectCheckbox").find(".selectDiv").prev(".inputDiv").find("p").text(title);
            // 执行回调函数
            if(opts.onchange){
                opts.onchange.call(self, data.toString());
            }
            // 
            opts.data = data;
        };
    
        // 全不选
        SelectCheckBox.prototype.clear = function(){
            this.$element.find("input").attr("checked", false);
            this.fefresh();
        };
    
        // 全选
        SelectCheckBox.prototype.selectAll = function(){
            this.$element.find("input").attr("checked", true);
            this.fefresh();
        };
    
        // 设置选中的值
        SelectCheckBox.prototype.setData = function(data){
            if(data && !$.isArray(data)){
                data = data.split(',');
            }
            if(data && data.length > 0){
                this.$element.find("input").each(function(){
                    var val = $(this).val();
                    if($.inArray(val, data) > -1){
                        $(this).attr("checked", true);
                    }
                });
                //
                this.fefresh();
            }
    
            return this;
        };
    
        // 获取选中的值
        SelectCheckBox.prototype.getSelected = function(){
            return this.options.data;
        };
    
        $.fn.selectCheckBox = function(options){
            var $this = $(this);
            // 判断是否初始化过的依据
            var scb = $this.data('selectCheckBox');
    
            if(!scb){
                var opts = typeof options == 'object' && options;
                // 初始化并缓存
                $this.data('selectCheckBox', (scb = new SelectCheckBox(this, opts)));
                // 创建节点
                scb.create();
                // 绑定事件
                scb.bindEvent();
            }
    
            // 调用方法
            if (typeof options === 'string') {
                if(scb){
                    var fn = scb[options];
                    if (!fn) {
                        throw ("selectCheckBox - No such method: " + options);
                    }
                    var args = $.makeArray(arguments).slice(1);
                    return fn.apply(scb, args);
                }
            }
    
            return scb;
        };
    
    })(jQuery);

    相关css

    .selectCheckbox .inputDiv{
        height:20px; 
        line-height:20px; 
        padding:2px 5px; 
        border:1px solid #CFCFCF; 
        background-color: rgba(255, 255, 255, 1);
        background-image: url('${ctx}/resource/images/arrow3_d.png');
        background-repeat: no-repeat;
        background-position: 99% 50%;
    }
    .selectCheckbox .selectDiv{
        padding:2px 5px; 
        border:1px solid #CFCFCF;
        background-color: #F8F8F8; 
        z-index: 1000;
        height: auto;
        line-height: 31px;
    }
    .selectCheckbox li{
        list-style-type: none;
        float: left;
    }

    调用方式:

    • html写法
    <div name="outOrgType"></div>
    • 调用js写法:
    $("div[name='outOrgType']").selectCheckBox({
        list: '1:aa;2:bb;3:cc', // 支持数组类型[{'code':1, 'name':'aa'}],支持字符串类型:"1:aa;2:bb"
        data: '1,2', // 支持数组类型[1,2,3],支持字符串类型:"1,2,3"
        col: 4, //默认一行4个
        formatter: null,
        seperator: ',', // 标题显示的分隔符
        noneSelectedText: '请选择', //没有选项的时候显示的标题
        onchange: null // 点击选中项的回调函数
    });

    示例图

    这里写图片描述

    展开全文
  • 演示单选框和复选框 <!--radio是单选框--> <!--让个radio成为一组,这样点击一号按钮后,再点击二号按钮,一号按钮会被重置为未选择状态--> <!--也就是说,一组中,只能由一个按钮被选择--> <!--通过设置一
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>演示单选框和复选框</title>
    </head>
    <body>
    <!--radio是单选框-->
    <!--让多个radio成为一组,这样点击一号按钮后,再点击二号按钮,一号按钮会被重置为未选择状态-->
    <!--也就是说,一组中,只能由一个按钮被选择-->
    <!--通过设置一样的name属性,可以将多个按钮设置为一组-->
    <label for="1"></label>
    <input id="1" name="1" type="radio" value="男">
    <input name="1" type="radio">
    <input name="1" type="radio">
    <!--<input name="1" type="radio">-->
    <!--<input name="1" type="radio">-->
    <!--<input name="1" type="radio">-->
    
    <!--是复选框-->
    <input type="checkbox">
    
    
    
    <!-- 下拉菜单-->
     <select>
            <!--每一个item,就是一个选项-->
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
            <option>选项4</option>
        </select>
    
    
    </body>
    </html>
    展开全文
  • 多选框下拉列表

    万次阅读 2018-08-01 12:41:56
    之前想写一个带多选框下拉列表,然后找相关的内容,发现大多都是用select写的,这种是默认的下拉列表样式,但有时候需要自己来写样式,这样用select就不合适了。 然后我就在csdn中无意间发现了一位博主...

    之前想写一个带多选框的下拉列表,然后找相关的内容,发现大多都是用select写的,这种是默认的下拉列表样式,但有时候需要自己来写样式,这样用select就不合适了。

    然后我就在csdn中无意间发现了一位博主(codingNoob,在此声明一下,他写了很多文章都不错,我还关注了!)是用li写的,只是没有多选框,然后我就用了一些他的代码,在加上自己的代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
            body{padding:30px;font-family: "微软雅黑";}
            li{list-style: none;}
            *{padding:0;margin:0;}
            #selector{
            	position:relative;
            	height:30px;
            	width:510px;
            	margin-left: 100px;
            	margin-top: 100px;
            	font-size:13px;
            	line-height:30px;
            	text-align:left;        			
            	user-select:none;
            }
            #selector select{display:none;} 
            #selector .arrow{
            	position:absolute;right:5px;top:12px;display:block;height:0;width:0;
            	border-top:8px solid lightgreen;border-right:5px solid transparent;
            	border-left:5px solid transparent;
            }
            #selector .mr-selector{
            	display:block;height:30px;width:500px;
            	padding-left:10px;border:1px solid lightgreen;
            	cursor:default;
            	overflow: hidden;
            }
            #selector .select{display:none;width:510px;margin-top:-1px;border:1px solid lightgreen;}
            #selector .select li{height:30px;line-height:30px;padding-left:10px;}
        </style>
        <link rel="stylesheet" href="xuankuang/iconfont.css" />
        <link rel="stylesheet" href="xuankuang/demo.css" />
        <script src="js/jquery-1.11.0.min.js"></script>
        <title>带多选框的下拉列表</title>
    </head>
    <body>
        <div id="selector">
            <span class="mr-selector">请选择选项</span>
            <span class="arrow"></span>
            <ul class="select">
                <li><i id="ki1" class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>请选择选项</li>
                <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容一</li>
                <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容二</li>
                <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容三</li>
                <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容四</li>
            </ul>
        </div>
        <script>
            (function(){
                var selector = $("#selector");
                var select = $("#selector .select");  //模拟select的ul选项
                var mrSelector = $("#selector .mr-selector");
                var li = $("#selector .select li"); //li选项
               
                selector.click(function(eve){
                    eve.stopPropagation();   //阻止冒泡避免点击后消失    
                });
                mrSelector.click(function(){
                    select.toggle();
                });
                li.click(function(eve){
                	var ttt = $(mrSelector).text();
                    var index = $(this).index();               
                    eee = $(this).find('i').attr("class");
                    if(eee=="icon iconfont icon-duoxuankuang"){
                    	$(this).find('i').attr("class","icon iconfont icon-duoxuankuang2");
                    	if(index==0){
                    		var text = $(this).text();  
                    		mrSelector.text(ttt);      
    	                }else if(index!=0){
    	                	var text = ttt+$(this).text();  
    	                	mrSelector.text(text);      
    	                }
                    }else if(eee=="icon iconfont icon-duoxuankuang2"){
                    	$(this).find('i').attr("class","icon iconfont icon-duoxuankuang");
                    }
                });
                
                $("body").click(function(){
                    select.hide();
                });
            }());
        </script>
    </body>
    </html>
    

    1、首先是下拉列表的样式:

    2、然后我自己添加了多选框,可以点击选中,这个多选框是用了阿里巴巴矢量图库的图标,这个不错,有很多矢量图,可以选择然后加入购物车生成代码,很方便!

    3、还有点击就会在上面的框里显示选中的一项的内容。但是这个有一个bug,就是选择取消的时候不能删除相应的文字。这个我暂时还没做出来,有哪位大神知道这个怎么做啊!

    展开全文
  • 在前后端交互的时候,我们经常要取数据、传数据、对...但要是单选框或者多选框,再或者下拉菜单呢?我们又该如何去取数据,这是一个值得思考的问题。 单选框选中问题 //input.html &lt;!DOCTYPE html&gt...
  • html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出现下拉菜单,用户...
  • 多选下拉菜单控件(HTML)

    热门讨论 2011-01-12 11:01:28
    HTML的多选下拉菜单控件,适合B/S开发
  • 下拉列表是指允许网页浏览者从下拉菜单中选择某一项,我们通常会在网页中看到各种下拉列表,这是一种最节省空间的方式。正常情况下,浏览者只能看见一个选项,单击选项按钮打开菜单后才能看到全部的选项。其...
  • 近段时间在学习JQuery,作为笔记,写点东西,废话不说了,下面是jsp,js,css代码,注释里写的已经很清楚了,不需要额外的再说了   JSP  String path = request.getContextPath();  String basePath
  • DOM为列表下拉菜单添加选项 创建选项除了使用前面所示的createElement方法之外,还可以使用专门的构造器来构造一个选项出来。 new Option( text ,value , defaultSelected ,selected) 该构造器有4个参数,说明...
  • dropdownmenu一个写好的微信小程序帅条件条件筛选,下拉菜单,直接引用组件就可以 读懂并灵活运用必须具有html,css ,js基础,除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档
  • html+css实现点击显示再次点击隐藏不联动的下拉菜单 实现不联动的下拉菜单核心思想: input<type=“checkbox”>(复选框) label和input的绑定 溢出隐藏和高度的转换 checked选择器   使用复选框...
  • //查找当前元素子节点中的对象,修改其class,这样 //这样当有下拉菜单时,可以分别独立处理,而不会出现都下拉的bug $(this).find(".dropdown-menu").addClass('show'); }).mouseout(function(){ $(this).find...
  • vue下拉菜单选择输入框 @ tillhub / vue-search-filter (@tillhub/vue-search-filter) Vue search input with dropdown for more filters. Vue搜索输入带有下拉列表,用于更过滤器。 View Demo 查看演示 ...
  • html 原生下拉菜单 select ,多选 multiple
  • 目录 介绍 现场演示 ...您可以使用jQuery进行多选复选框下拉列表,而不是使用HTML中的个属性。 这是一个简单的HTML控件,带有jQuery和CSS,可以在任何Web编程语言中使用。 现场演示 https...
  • 在日常的生活中,想必大家都接触过下拉菜单的使用,这样为我们提供了极大的方便,那么下面看一下如何来制作吧。 one: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • 如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,怎么设置某一项选中 先来看个下拉列表 张店 淄川 博山 桓台 上面是一个非常简单的下拉列表,加了一个按钮,可以选取他们...
  • js css3下拉城市菜单多选代码模板,由HTML+css+js完成模板
  • 今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等
  • //根据值选中下拉菜单某项 function setSelectedValue(id,value){ var selectObj = document.getElementById(id); for(i=0;i&lt;selectObj.length;i++){ if(selectObj.options[i].value==value){ ...
  • css实现列表下拉菜单by David Piepgrass 由David Piepgrass 逐行:点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS tricks for click-to-open drop-down lists and menus) For as long as I can...
  • DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <title>单选...
  • 应要求要把excel转成html 还要把 文本框 多选框 单选框 下拉框 带过来, 看了一下api只找到了 HSSFTextbox 文本框的,问一下 多选框 单选框 下拉框,求大神解答
  • select多选框的整体思路是:将被选中的值连成字符串后赋值给某标签(以input、div标签为例)即可,下面会进行详细说明。 ps:PC端和移动端的js代码写的不太一样,但是原理是一样的(因为第一个是我写的,另一个是...
  • jQuery和CSS3超酷二级下拉菜单插件

    千次阅读 2015-02-28 13:01:02
    这是一款效果很酷又简单实用的jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单...另外,你可以十分容易的自定义二级下拉菜单的样式,添加一个搜索或登录注册表单等等。 在线演示:http://www.
  • //得到下拉菜单的选中项的文本(注意中间有空格)var cc1 = $(“.formc select[@name=’country’] option[@selected]”).text();//得到下拉菜单的选中项的值var cc2 = $(‘.formc select[@name=”country”]’).val()...
  • 微信小程序|下拉菜单

    千次阅读 2020-03-10 00:00:00
    欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更此系列文章。问题描述下拉菜单的运用:下拉菜单在各类网页,app或者小...
  • 一、网页下拉列表的自动填写,怎么实现呢?看看需要实现自动填写的下拉列表吧。 所在地区,首先需要选择省,然后才能选择市。我们用网页自动操作通用工具实现。 下面我们来讲讲实现步骤。首先,打开网页...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,597
精华内容 11,438
关键字:

下拉菜单多选框html