首页 >web前端 >js教程 > 正文

bootstrap select插件如何实现多选框?(代码)

原创2018-09-14 17:34:470328
phpstudy集成环境下载
本篇文章给大家带来的内容是关于bootstrap-select插件如何实现多选框?(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

HeBeiTianQi.jsp页面

<!--bootstrap-select          .css引用-->
<link rel="stylesheet" href="static/bootstrap-select/bootstrap-select.min.css" />
<body>
<div class="col-sm-2" style="width:250px">
    <label class="control-label" for="txt_search_departmentname">灾害类别</label>
    <select class="selectpicker" multiple  id="disasterType" name="slt_followDisasterType">                        
        <option value="全部">全部</option>                        
        <option value="暴雨洪涝">暴雨洪涝</option>
        <option value="干旱">干旱</option>
        <option value="风灾">风灾</option>
        <option value="冰雹">冰雹</option>    
        <option value="雷电">雷电</option>
        <option value="大雾">大雾</option>    
        <option value="沙尘暴">沙尘暴</option>
        <option value="高温热浪">高温热浪</option>    
        <option value="渍涝">渍涝</option>
        <option value="干热风">干热风</option>    
        <option value="气象地质灾害">气象地质灾害</option>
        <option value="风暴潮">风暴潮</option>    
        <option value="病虫害">病虫害</option>
        <option value="森林草原火灾">森林草原火灾</option>    
        <option value="龙卷">龙卷</option>
    </select>
</div>
<!--bootstrap-select          .js引用-->
<script src="static/bootstrap-select/bootstrap-select.js"></script>
</body>

HeBeiTianQi.js

$('#disasterType').selectpicker('val', ['全部']);//赋初始值
//获取   TianQi.jsp页面   选择的灾害类型值(可多选)
function disasterTypeVal(){    
    var optionSelect=$('#disasterType').find("option:selected").val('value');
    var optionSelectValArr=new Array();
    var len="";    
    for(var i=0,len=optionSelect.length;i<len;i++){
        var optionSelectVal=optionSelect[i].text;    //获取数组  option的值
        optionSelectValArr.push(optionSelectVal);    
    }    
    var disasterTypeStr=optionSelectValArr.join(",");
    return disasterTypeStr;
}

相关推荐:

select下拉框多选的实现

详解AngularJs + bootstrap如何实现下拉选择框

以上就是bootstrap select插件如何实现多选框?(代码)的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:bootstrap select
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息
    推荐视频教程
  • 李炎恢bootstrap视频教程李炎恢bootstrap视频教程
  • Bootstrap3参考手册Bootstrap3参考手册
  • 独孤九贱(7)_Bootstrap视频教程独孤九贱(7)_Bootstrap视频教程
  • Bootstrap.用户界面架构视频教程Bootstrap.用户界面架构视频教程
  • BootStrap插件讲解视频教程BootStrap插件讲解视频教程
  • 视频教程分类