Bootstrap select 多选并获取选中的值

  • Post author:
  • Post category:其他


代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<script src=”js/jquery-3.4.1.min.js” type=”text/javascript” charset=”utf-8″></script>

<script src=”https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js”></script>

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet”>

<!– Latest compiled and minified CSS –>

<link rel=”stylesheet”

href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css”>

<!– Latest compiled and minified JavaScript –>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js”></script>

<!– (Optional) Latest compiled and minified JavaScript translation files –>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js”></script>

<title></title>

</head>

<body id=””>

<div class=”form-group”>

<!– <div class=”title”>

可选择多个指标

</div> –>

<div class=”centent1Select”>

<select id=”usertype” title=”可选择多个指标” οnchange=”centent1SelectOnchang(this)”

class=”selectpicker show-tick form-control” multiple data-live-search=”false”>

<option value=”1″>累计访问人数</option>

<option value=”2″>打开次数</option>

<option value=”3″>访问次数</option>

<option value=”4″>访问人数</option>

<option value=”5″>新访问人数</option>

<option value=”6″>平均访问深度</option>

<option value=”7″>次均停留时长</option>

<option value=”8″>总添加人数</option>

<option value=”9″>新添加人数</option>

<option value=”10″>删除添加人数</option>

<option value=”11″>分享次数</option>

<option value=”12″>分享人数</option>

</select>

</div>

</div>

<script type=”text/javascript”>

$(window).on(‘load’, function () {


$(‘#usertype’).selectpicker({


‘selectedText’: ‘cat’

});

});

//取出选择的任务执行人的方法

function centent1SelectOnchang() {


var val = “”, staffs = [];

//循环的取出插件选择的元素(通过是否添加了selected类名判断)

for (var i = 0; i < $(“li.selected”).length; i++) {


val = $(“li.selected”).eq(i).find(“.text”).text();

if (val != ”) {


staffs.push(val);

}

}

console.log(staffs)

}

</script>

</body>

</html>



版权声明:本文为weixin_44018338原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。