0
点赞
收藏
分享

微信扫一扫

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

萨科潘 2022-03-30 阅读 19



h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看。

bootstrap select是很好用的前端插件

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_javascriptbootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_css_02

首先引入bootstrap和bootstrap-select的css和js

  1.  ​​<link rel="stylesheet" href="css/bootstrap.css">​

  2. ​<link rel="stylesheet" href="css/bootstrap-select.min.css">​

  3. ​<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>​

  4. ​<script src="js/bootstrap-select.min.js" type="text/javascript" charset="utf-8"></script>​

html​:主要是增加class selectpicker 并添加multiple属性

  1. ​<select id ="weatherType" name="weatherType" class="form-control selectpicker" multiple="multiple" title="请选择">​

  2. ​</select>​

option一般为ajax添加

js​:初始化是为

$("#weatherType").selectpicker('refresh');

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_bootstrap_03

这样默认选中第一个

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_css_04bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_css_05

如果想默认什么也不选,则:

$("#weatherType").selectpicker('deselectAll');

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_javascript_06

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_javascript_07bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_css_08

注意,默认不选显示的字样需要在select中设置title属性,不然会显示默认的 英文 nothing selected;


多选框的取值​:

$("#weatherType").val()

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_bootstrap_09

直接取值就行,多选的值会自动用逗号分隔开

但如果你提交数据时将表单序列化

var formData = $("#createUserForm").serialize();

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_bootstrap_10

则val()只能取到一个选中的值,无法传入多选的值

解决办法:

  1. ​$("#weatherType").change(function(){​

  2. ​$("input[name=weatherType1]").val($("#weatherType").val())​

  3. ​})​

在change事件时将值赋给另一个隐藏的input即可


多选框的赋值:

$("#weatherType").selectpicker ("val",weatherType).trigger("change");

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_javascript_11

其中weatherType为逗号隔开的值得字符串,赋值后展开后自动打勾

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_css_12bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)_javascript_13



梅花香自古寒来


举报

相关推荐

0 条评论