gpt4 book ai didi

javascript - Bootstrap Multiselect - 通过单击取消选择

转载 作者:行者123 更新时间:2023-11-30 14:22:30 24 4
gpt4 key购买 nike

我正在使用Bootstrap-Multiselect 功能;我想在单击“x”时取消选择一个选项。这是我正在寻找的一个简单示例。

$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");

$('#tags').find('[value=' + tag + ']').prop('selected', false);
});
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>

<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>

<div value='Php' id='remove'>x</div>
</div>
</body>

</html>

最佳答案

这可以通过取消选择所有然后获取所选值并从中删除目标标记并重新选择其余部分然后最后刷新选择来实现:

$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
var values = $('#tags').val();

if(values){
$('#tags').selectpicker('deselectAll');
$('#tags').selectpicker('val', values.filter(function(e) {return e !== tag }));
$('#tags').selectpicker('refresh');
}
});
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>

<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>

<div value='Php' id='remove'>x</div>
</div>
</body>

</html>

关于javascript - Bootstrap Multiselect - 通过单击取消选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52513187/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com