bootstrap select多选

1、页面效果
<div class="form-group">
     <div class="col-md-2 control-label"><label>学段:</label></div>
         <div class="col-md-3 controls">
           <select id="period" name="period"  class="selectpicker show-tick form-control" multiple data-live-search="false" >
              <option value="-1">--请选择!--</option>
              <option value="0">小学</option>
              <option value="1">初中</option>
              <option value="2">高中</option>
            </select>
        </div>
    </div></div>2、js
$(window).on(‘load‘, function () {
     $(‘#period‘).selectpicker({
            ‘selectedText‘: ‘cat‘
     });
});

3、回显值

   $(‘.selectpicker‘).selectpicker(‘val‘, ‘Mustard‘);

 

时间: 2024-08-22 07:07:09

bootstrap select多选的相关文章

工作需求----表单select多选交互

由于工作需求接触select框多选的情况,以下是我分享的代码,主要是进入页面默认选中.支持多选属性: 1.html内容 multiple=”multiple” 属性为多选属性 <div class="c-n-survey-option"> <select name="0" multiple=”multiple” class="c-n-survey-select" id="mySelect" > <

select多选 multiple的使用

select多选  multiple的使用 <html> <head> <script type="text/javascript"> function showDiv(id){ document.getElementById("selectOption").style.display="block"; document.getElementById("selectOption").styl

jq bootstrap select 点击不能动弹

jq  bootstrap select 点击不能动弹   因为是样式selectpicker  冲突. 解决办法换 样式  form-control <select name="type_name1" id="type_name1" style="width: 210px" class="form-control" > </select> 为option追加值:document.getElementB

select多选

1.css <style> .divBox{ width:400px; margin:100px auto; } .divBox span{ vertical-align:top; display:inline-block; margin-top:16px; } .divBox .duiMutiple{ display:inline-block; width:330px; vertical-align:top; } .divSel{ height:35px; line-height:35px;

在ASP.NET MVC中实现Select多选

我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收多选Select的选中项呢? 实现效果如下: 初始状态某些选项被选中. 当按着ctrl键,进行重新选择多项,点击"提交"按钮,把选中项的id拼接. 对于Select中的项,包含显示值,Value值,以及是否选中,抽象成如下的类. public class City { public int

bootstrap +angualrJS(全选/反选)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <script type="text/javascript"

JQuery chosen插件,实现select多选

步骤:1.js 2.在select标签上添加 multiple="multiple" 属性 3.添加class=" chosen-select" 属性 即可实现多选 默认值选定: 1.获取标签默认值,根据格式拆分数据 2.使用 $('.chosen-select').chosen({ allow_single_deselect : true }); $('.chosen-select').trigger("liszt:updated"); eg:

Bootstrap select(选择列表)

当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项,则使用选择框 1.使用<select>展示列表选项 2.使用multiple="multiple"允许用户选择多个选项 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> &l

Angularjs bootstrap table多选(全选),支持单击行选中

最终实现效果:  index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-anima