文档章节

下拉框多选

o
 osc_wws45aot
发布于 2019/08/21 16:17
字数 1086
阅读 14
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>BootStrap-Select</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-select/1.13.6/css/bootstrap-select.css" />

<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-select/1.13.6/js/bootstrap-select.js"></script>
</head>
<body>
<div class="page-content container">
<div class='page-body'>
<div class='panel panel-default'>
<div class="panel-heading"><h3 class='panel-title'>使用selectpicker类</h3></div>
<table class='table table-bordered'>
<thead>
<tr>
<th width=35>No.</th>
<th width="70%">描述</th>
<th width="30%">选择框</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>普通标准单选框</td>
<td>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</td></tr>
<tr>
<td>2</td>
<td>带下拉分组optgroup, 选中项显示对勾</td>
<td>
<select class="selectpicker" data-show-tick="true">
<optgroup label="Picnic">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>
</td></tr>
<tr>
<td>3</td>
<td>多选,设置noneSelectedText为'--请选择--'</td>
<td>
<select class="selectpicker" data-none-selected-text="--请选择--" multiple>
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
</select>
</td></tr>
<tr>
<td>4</td>
<td>多选,设置下拉框右对齐,最多可选2项</td>
<td>
<select class="selectpicker" multiple data-max-options="2" data-dropdown-align-right = "true">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
</select>
</td></tr>
<tr>
<td>5</td>
<td>多选,显示选中全部和取消选中按钮,并设置英文文本为中文</td>
<td>
<select class="selectpicker" multiple data-actions-box="true" data-deselect-all-text = '取消选中' data-select-all-text='选中全部'>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</td></tr>
<tr>
<td>6</td>
<td>多选,显示搜索框,可通过option data-tokens="ketchup mustard"来指定搜索关键字</td>
<td>
<select class="selectpicker" multiple data-live-search="true" data-none-results-text="没找到相应记录{0}">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading"><h3 class='panel-title'>使用js来初始化</h3></div>
<table class='table table-bordered'>
<thead>
<tr>
<th width=35>No.</th>
<th width="70%">描述</th>
<th width="30%">选择框</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>普通标准单选框 <button class='btn btn-sm btn-primary' type='button' onclick='make1()'>初始化</button></td>
<td>
<select class="form-control input-sm" id="bs-select1">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</td></tr>
<tr>
<td>2</td>
<td>带下拉分组optgroup, 选中项显示对勾 <button class='btn btn-sm btn-primary' type='button' onclick='make2()'>初始化</button></td>
<td>
<select class="form-control input-sm" id="bs-select2">
<optgroup label="Picnic">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>
</td></tr>
<tr>
<td>3</td>
<td>多选,显示搜索框,可通过option data-tokens="ketchup mustard"来指定搜索关键字 <button class='btn btn-sm btn-primary' type='button' onclick='make3()'>初始化</button></td>
<td>
<select class="form-control input-sm" size=1 multiple id="bs-select3">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
</td></tr>
</tbody>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading"><h3 class='panel-title'>API方法列表</h3></div>
<table class='table table-bordered'>
<thead>
<tr>
<th width=35>No.</th>
<th width="70%">描述</th>
<th width="30%">选择框</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>单选框取值、赋值 <button class='btn btn-sm btn-primary' type='button' onclick='getval1()'>取值</button>
<button class='btn btn-sm btn-primary' type='button' onclick='setval1()'>赋值</button></td>
<td>
<select class="form-control input-sm selectpicker" id="api-select1">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</td></tr>
<tr>
<td>2</td>
<td>多选框取值、赋值 <button class='btn btn-sm btn-primary' type='button' onclick='getval2()'>取值</button>
<button class='btn btn-sm btn-primary' type='button' onclick='setval2()'>赋值</button></td>
<td>
<select class="form-control input-sm selectpicker" multiple id="api-select2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Marcus</option>
<option>Lmlxj</option>
</select>
</td></tr>
<tr>
<td>3</td>
<td>删除option,render和refresh比较, option增|删|selected改变需要调用refresh才生效 <button class='btn btn-sm btn-primary' type='button' onclick='del3()'>删除option</button>
<button class='btn btn-sm btn-primary' type='button' onclick='render3()'>render</button>
<button class='btn btn-sm btn-primary' type='button' onclick='refresh3()'>refresh</button>
</td>
<td>
<select class="selectpicker form-control input-sm" id="api-select3">
<optgroup label="Picnic">
<option value="Mustard">Mustard</option>
<option value="Ketchup">Ketchup</option>
<option value="Relish">Relish</option>
</optgroup>
<optgroup label="Camping">
<option value="Tent">Tent</option>
<option value="Flashlight">Flashlight</option>
<option value="Toilet Paper">Toilet Paper</option>
</optgroup>
</select>
</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function make1() {
$("#bs-select1").selectpicker();
}
function make2() {
$("#bs-select2").selectpicker({showTick: true});
}
function make3() {
$("#bs-select3").selectpicker({liveSearch: true, noneResultsText: "没找到相应记录{0}"});
}
function getval1() {
alert('selectpicker("val"): ' + $("#api-select1").selectpicker('val'));
alert('$("#api-select1").val(): ' + $("#api-select1").val());
}
function setval1() {
$("#api-select1").selectpicker('val', 'Ketchup');
// 或 $("#api-select1").val('Ketchup').selectpicker('refresh');
}
function getval2() {
alert('selectpicker("val"): ' + $("#api-select2").selectpicker('val'));
alert('$("#api-select1").val(): ' + $("#api-select2").val());
}
function setval2() {
$("#api-select2").selectpicker('val', ['Ketchup','Marcus']);
// $("#api-select2").val(['Ketchup','Marcus']).selectpicker('refresh');
}
function del3() {
$('#api-select3').find('[value=Ketchup]').remove();
}
function render3() {
$('#api-select3').selectpicker('render');
}
function refresh3() {
$('#api-select3').selectpicker('refresh');
}
</script>
</body>
</html>

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

java学习day45-Thymeleaf教程(转载)

目录 Thymeleaf 教程 1. 创建模板文件 2. 标准表达式语法 2.1 简单表达式 2.1.1 ${…} 2.1.2 *{…} 2.1.3 #{…} 2.1.4 @{…} 2.1.5 ~{…} 2.1.6 内置对象 2.1.7 工具类 2.2 字面值 2.2.1 文字...

osc_nbg2lo7i
35分钟前
15
0
记录用户登陆信息,你用PHP是如何来实现的

对于初入门的PHP新手来说,或许有一定的难度。建议大家先看看PHP中session的基础含义,需要的朋友可以选择参考。 下面我们就通过具体的代码示例,为大家详细的介绍PHP中session实现记录用户登...

php开源社区
36分钟前
13
0
语音系统源码的开发,一对一语音直播源码

对于大多数人来说,直播已经不再陌生了,所谓是家喻户晓,只要是有智能手机,对于直播肯定是有所了解,对于直播大家想到是娱乐性的互动直播,其实视频直播的话也不是只有这一种方式,还有语音...

qq3595750856
36分钟前
9
0
友链

下面是我的友链啦~~ 外校大佬 _redness 魔法少女 Kylin_Seven 宠辱不惊,闲看庭前花开花落;去留无意,任随天边云卷云舒 Areds 不忘初心,方得使终 Quaint 技术宅拯救世界 校内巨佬们 wxyww ...

osc_94gn551r
37分钟前
5
0
友链

下面是我的友链啦~~ 外校大佬 _redness 魔法少女 Kylin_Seven 宠辱不惊,闲看庭前花开花落;去留无意,任随天边云卷云舒 Areds 不忘初心,方得使终 Quaint 技术宅拯救世界 校内巨佬们 wxyww ...

osc_xih8lf91
38分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部