bootstrap之select框多选的使用

Bootstrap之select多选的使用

1. 引入JS和CSS样式：

<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-select.css">
<link rel="stylesheet" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/bootstrap-select.js"></script>

备注：

• 引入jquery方便使用jquery进行js相关操作
• 引入boostrap相关js和css使用更简单

• 引入bootstrap select的css和js进行select的显示和功能组件使用

  开始实际操作：

  页面显示

<select id="id_select" name="lls" class="selectpicker bla bla bli" style="background-color: white;" multiple name="uname" style="width:100%;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </optgroup>
</select>

获取bootstrap select 选择的值：

ajax获取：

$("#submitBtn").on('click', function(event) {
    //获取select的值
    o = document.getElementById("id_select");
    var intvalue="";
    for(i=0;i<o.length;i++){
        if(o.options[i].selected){
            intvalue+=o.options[i].value+",";
        }
    }
    event.preventDefault();
    var params = $("form").serializeArray();
    //select 传递的真实值：
    var id_select = intvalue.substr(0,intvalue.length-1);
    //将原有的数据添加select选择的数据
    params.push({"name":"organization","value":id_select});
    sendRequest('{:U("saveUserInfo")}', params, function(data) {
       if (data.status == 1) {
//                    simpleSwal(data.info, '', 1, function() {
//                        jumpCurrentFrame();
//                    });
              layer.open({
                  content: data.info
                  ,skin: 'msg'
              },function(){
                  jumpCurrentFrame();
              });
          } else {
//                    simpleSwal(data.info, '', 2);
              layer.open({
                  content: data.info
                  ,skin: 'msg'
              });
          }
      }
}

点击提交按钮将隐藏的：

设置一个特殊的名字隐藏字段：

<input type="hidden" name="organization" id="organization" value="">

点击提交时特有的ID值：

<button class="btn btn-info" type="submit" id="submit">
   <i class="icon-ok bigger-110"></i>提交
</button>

点击提交将隐藏属性的input框进行赋值

<script>
    //获取值
    $("#submit").on('click', function() {
        //获取的值
        o = document.getElementById("id_select");
        var intvalue="";
        for(i=0;i<o.length;i++){
            if(o.options[i].selected){
                intvalue+=o.options[i].value+",";
            }
        }

        var id_select = intvalue.substr(0,intvalue.length-1);
        $("#organization").val(id_select);
    })

</script>

备注：

接收到的值为逗号隔开的数字字符串，可直接将其进行数据库存储操作。