为什么该选项在多选择列表中第二次没有被选中？
为什么该选项在多选择列表中第二次没有被选中？
提问于 2018-08-16 12:28:55
我需要选择取消选择选项在多选择通过JavaScript。代码似乎没问题，但它不会在第二次尝试选择相同的项目时触发。
因此，尝试选择全职，再次单击它，这将被取消选举.试着再点击它，它就不能工作了。
$('.multi-select option').on('mousedown',function (e) {
e.preventDefault();
selectTop = $(this).parent().scrollTop();
var before = $(this).prop("selected");
console.warn("before: " + before);
if (before == true) {
$(this).prop("selected", false);
}
else {
$(this).attr("selected", "selected");
}
console.info("Changed from " + before + " to " + $(this).prop('selected'));
mustChangeScrollTop = true;
return true;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Multi select jquery test</title>
</head>
<body>
<select size="6" name="WorkSchedule" multiple="multiple" id="WorkSchedule" class="form-control multi-select">
<option value="">Select All That Apply</option>
<option value="4">Full-Time</option>
<option value="5" >Part-Time</option>
<option value="6" >Per Diem</option>
<option value="7">Locum Tenens</option>
</select>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-16 12:36:41
问题很小；您的else语句更改的是.attr值而不是.prop值。
else {
$(this).attr("selected", "selected");
}属性和属性虽然相似，但不引用相同的基础值。下面是工作解决方案，在.attr语句中将else更改为.prop：
$('.multi-select option').on('mousedown',function (e) {
e.preventDefault();
selectTop = $(this).parent().scrollTop();
var before = $(this).prop("selected");
console.warn("before: " + before);
if (before == true) {
$(this).prop("selected", false);
}
else {
$(this).prop("selected", "selected");
}
console.info("Changed from " + before + " to " + $(this).prop('selected'));
mustChangeScrollTop = true;
return true;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Multi select jquery test</title>
</head>
<body>
<select size="6" name="WorkSchedule" multiple="multiple" id="WorkSchedule" class="form-control multi-select">
<option value="">Select All That Apply</option>
<option value="4">Full-Time</option>
<option value="5" >Part-Time</option>
<option value="6" >Per Diem</option>
<option value="7">Locum Tenens</option>
</select>
</body>
</html>
Stack Overflow用户
发布于 2018-08-16 12:32:41
如果我完全理解了你的意思，那么这应该是你想要的，只要一小笔小小的改变。
$('.multi-select option').on('mousedown',function (e) {
e.preventDefault();
selectTop = $(this).parent().scrollTop();
var before = $(this).prop("selected");
console.warn("before: " + before);
if (before == true) {
$(this).prop("selected", false);
}
else {
$(this).prop("selected", true); //the change is here
}
console.info("Changed from " + before + " to " + $(this).prop('selected'));
mustChangeScrollTop = true;
return true;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Multi select jquery test</title>
</head>
<body>
<select size="6" name="WorkSchedule" multiple="multiple" id="WorkSchedule" class="form-control multi-select">
<option value="">Select All That Apply</option>
<option value="4">Full-Time</option>
<option value="5" >Part-Time</option>
<option value="6" >Per Diem</option>
<option value="7">Locum Tenens</option>
</select>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51877106
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号