javascript - f选择清除选择
问题描述
如何fSelect
在单击事件中清除多选下拉菜单,这是一个示例,通过单击清除按钮它应该删除所有选定的值。
(function($) {
$(function() {
$('.my-select-box').fSelect();
$('#ClearSelect').click(function(){
$("#fselectMulti option:selected").removeAttr("selected");
})
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css" rel="stylesheet"/>
<script src="https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.js"></script>
<select id="fselectMulti" class="my-select-box" multiple="multiple">
<optgroup label="Northeast">
<option selected value="me">Maine</option>
<option selected value="ny">New York</option>
<option value="nj">New Jersey</option>
<option value="vt">Vermont</option>
</optgroup>
<optgroup label="Southwest">
<option value="az">Arizona</option>
<option selected value="nm">New Mexico</option>
<option value="ca">California</option>
<option value="nv">Nevada</option>
</optgroup>
</select>
<button id="ClearSelect">Clear</button>
解决方案
您可以通过循环选项来清除并取消选择它们,例如:
$(function() {
$('.my-select-box').fSelect();
$('#ClearSelect').click(function() {
$('#fselectMulti option:selected').removeAttr('selected');
$('.my-select-box').prev(".fs-dropdown").find(".fs-options .fs-option").each(function() {
$(this).removeClass('selected', false);
});
console.log($('#fselectMulti').val());
$('.fs-label').html('Select some options');
})
$('#CheckSelect').click(function(){
console.log($('#fselectMulti').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css" rel="stylesheet" />
<script src="https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.js"></script>
<select id="fselectMulti" class="my-select-box" multiple="multiple">
<optgroup label="Northeast">
<option selected value="me">Maine</option>
<option selected value="ny">New York</option>
<option value="nj">New Jersey</option>
<option value="vt">Vermont</option>
</optgroup>
<optgroup label="Southwest">
<option value="az">Arizona</option>
<option selected value="nm">New Mexico</option>
<option value="ca">California</option>
<option value="nv">Nevada</option>
</optgroup>
</select>
<button id="ClearSelect">Clear</button>
<button id="CheckSelect">Check Array</button>
推荐阅读
- mysql - UWP 设备连接到 MySQL 的问题
- salt-stack - 编排 sls 文件中的支柱数据未解析
- python - 如何在 ansible.cfg 文件中添加多个库路径
- sql - Bigquery - json_extract 数组中的所有元素
- javascript - 尝试在页面刷新后保持导航栏中选定的 div 处于活动状态
- jquery - 带有变量的正则表达式构造函数不起作用,但似乎正确
- python-3.x - 如何让 Tensorflow Served 模型从传入的输入而不是本地批处理文件中提取?
- java - java.sql.SQLTransactionRollbackException:在请求的时间内无法获得锁
- c++ - 管理 Lua 轻量级用户数据的正确方法
- c - 是否可以抑制 Xcode (clang) 分析器报告的问题实例?