`

BootstrapCSS之Select

    博客分类:
  • css
阅读更多
效果图:




代码:


<!-- Include Bootstrap-select CSS, JS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>

<style type="text/css">
#bootstrapSelectForm .selectContainer .form-control-feedback {
    /* Adjust feedback icon position */
    right: -15px;
}
</style>

<form id="bootstrapSelectForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Favorite color</label>
        <div class="col-xs-5 selectContainer">
            <select name="colors" class="form-control" multiple title="Choose 2-4 colors">
                <option value="black">Black</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
                <option value="orange">Orange</option>
                <option value="red">Red</option>
                <option value="yellow">Yellow</option>
                <option value="white">White</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Language</label>
        <div class="col-xs-5 selectContainer">
            <select name="language" class="form-control">
                <option value=""></option>
                <option value="arabic">Arabic</option>
                <option value="english">English</option>
                <option value="french">French</option>
                <option value="german">German</option>
                <option value="other">Other</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#bootstrapSelectForm')
        .find('[name="colors"]')
            .selectpicker()
            .change(function(e) {
                /* Revalidate the color when it is changed */
                $('#bootstrapSelectForm').formValidation('revalidateField', 'colors');
            })
            .end()
        .find('[name="language"]')
            .selectpicker()
            .change(function(e) {
                /* Revalidate the language when it is changed */
                $('#bootstrapSelectForm').formValidation('revalidateField', 'language');
            })
            .end()
        .formValidation({
            framework: 'bootstrap',
            excluded: ':disabled',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                colors: {
                    validators: {
                        callback: {
                            message: 'Please choose 2-4 colors you like most',
                            callback: function(value, validator, $field) {
                                /* Get the selected options */
                                var options = validator.getFieldElements('colors').val();
                                return (options != null && options.length >= 2 && options.length <= 4);
                            }
                        }
                    }
                },
                language: {
                    validators: {
                        notEmpty: {
                            message: 'Please select your native language.'
                        }
                    }
                }
            }
        });
});
</script>









引用:
http://formvalidation.io/examples/bootstrap-select/









-




  • 大小: 16.4 KB
分享到:
评论

相关推荐

    Select2BootstrapCSS.zip

    Select2 Bootstrap CSS 是一个简单的 CSS,它能使 select2 部件更加适应 Bootstrap。 标签:Select2

    bootstrapselect下拉框js,css

    下面将详细介绍 Bootstrap Select 的使用方法、核心功能以及与 JavaScript(js)和 CSS 的关联。 1. **安装与引入** 要使用 Bootstrap Select,首先确保你已经在项目中引入了 Bootstrap 的 CSS 和 JS 文件,以及 ...

    bootstrap-select

    另一方面,`bootstrap-select.css` 和 `bootstrap-select.min.css` 是该插件的样式表文件,它们负责下拉选择框的视觉呈现。`bootstrap-select.css` 是原始的 CSS 文件,对于开发者来说,查看和修改这些样式更加方便...

    bootstrap-selectv1.12.4.zip

    1. `bootstrap-select.css`: 主要的 CSS 样式文件,定义了 Bootstrap Select 的视觉样式。 2. `bootstrap-select.min.css`: 压缩版的 CSS 文件,用于生产环境,减少页面加载时间。 3. `bootstrap-select.js`: 主要的...

    bootstrap select树形下拉框

    要使用Bootstrap Select树形下拉框,首先确保已经引入了Bootstrap和Bootstrap Select的CSS和JavaScript文件。这些文件可以从Bootstrap官网或者CDN获取。同时,可能还需要引入一个专门处理树形结构的库,如jQuery ...

    bootstrap-select-1.13.14

    在实际使用中,开发者可以通过引入相应的 CSS 和 JavaScript 文件,以及必要的初始化代码,将 Bootstrap Select 集成到项目中。例如: ```html &lt;link rel="stylesheet" href="path/to/bootstrap.min.css"&gt; ...

    Bootstrap框架下下拉框select搜索功能

    &lt;link rel="stylesheet" type="text/css" href="${basePath}/js/silviomoreto-bootstrap/bootstrap-select.css"&gt; ${basePath}/js/silviomoreto-bootstrap/bootstrap.min.css" rel="stylesheet"&gt; ${basePath}/js/...

    bootstrapvalidator表单验证 +select2 拼音模糊匹配 demo

    在实际应用中,为了使这两者完美结合,你需要在HTML中正确地引入BootstrapValidator和select2的CSS及JavaScript文件,然后在JavaScript代码中初始化并配置这两个插件。BootstrapValidator通常在表单元素上添加验证...

    bootstrap-select-1.13.9.zip

    在实际开发中,你可以通过在HTML中引入Bootstrap Select的相关CSS和JS文件,然后使用特定的类名和属性来初始化和操作这个插件。例如: ```html &lt;select class="selectpicker"&gt; &lt;option&gt;Option 1 &lt;option&gt;Option 2...

    Bootstrap-selectpicker多选框的简单实例

    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"&gt; &lt;!-- jQuery (required for Bootstrap's JavaScript plugins) --&gt; ...

    bootstrap-select使用示例.rar

    Bootstrap Select是一款基于Bootstrap...&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"&gt; &lt;!-- jQuery (required for Bootstrap JS) --&gt; ...

    bootstrap-select2-ztree.zip

    1. **引入库**:首先,你需要在HTML文件中引入Bootstrap、Select2 和 ZTree 相关的CSS和JS文件。确保正确放置这些文件,以保证正常加载。 2. **HTML结构**:创建一个基本的HTML结构,包含一个Bootstrap的`&lt;select&gt;`...

    bootstrap select2插件使用demo

    Bootstrap Select2插件是一款强大...通常,你需要在页面的`&lt;head&gt;`部分引入Bootstrap CSS和Select2 CSS,然后在`&lt;body&gt;`的底部引入jQuery(因为Select2依赖jQuery),接着是Bootstrap JS和Select2 JS。例如: ```html ...

    bootstrap-select下拉选择搜索框,可以多选和单选

    在实际项目中,Bootstrap Select的灵活性和易用性使其成为开发人员的首选工具之一,尤其是在选项众多的场景下,它的搜索功能能极大地提高用户体验。通过深入理解这个插件的用法和配置,我们可以轻松地将其集成到各种...

    bootstrap-select下拉框

    Bootstrap Select是一款...&lt;link rel="stylesheet" href="bootstrap-select-1.10.0/css/bootstrap-select.min.css"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt; ...

    bootstrap select 下拉框通过拼音搜索汉字

    在压缩包文件`bootstrap-select-1.12.4`中,你应该能够找到Bootstrap Select的完整源代码,包括CSS、JavaScript和示例。通过查看这些文件,你可以更深入地理解其工作原理,并根据需要自定义或扩展功能。同时,不要...

    bootstrap-select-1.12.4

    1. **基本使用**:首先,需要在项目中引入Bootstrap和Bootstrap Select的CSS及JS文件。然后,通过添加特定的类名(如`selectpicker`)到HTML的选择器元素上,就可以激活Bootstrap Select的功能。 2. **多选支持**:...

    bootstrap-select.js bootstrap-select.css

    在这个场景中,我们关注的是"bootstrap-select.js"和"bootstrap-select.css",这两个文件是Bootstrap框架的一个扩展,专门用于增强其原生下拉菜单的功能。 Bootstrap Select是一个流行的插件,它将Bootstrap的下拉...

    bootstrap-select下拉复选框.rar

    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"&gt; &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt; ...

    bootstrap-select下位列表插件

    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"&gt; &lt;select class="selectpicker"&gt; 选项1 选项2 ... &lt;/select&gt; ...

Global site tag (gtag.js) - Google Analytics