我有这个选择多个框,选项为按钮。
<select multiple class="form-control" onchange="selectedIds(this)" >
<option value="" onclick="selectUnselect(this)" class="btn btn-default">
option1
</option>
</select>
通过jQuery我点击
更改按钮类$(document).ready(function () {
$(".form-control option").click(function () {
if ($(this).hasClass('btn')) {
$(this).toggleClass('btn-success');
} else {
$(this).toggleClass('btn-default');
}
});
});
我想将所选选项的按钮颜色更改为绿色,例如来自btn btn-success
的{{1}}类,当用户再次点击所选选项时,它应该返回到初始颜色,即btn btn-default
单击单个选项工作正常但是当我选择多个选项时,前一个按钮的顶部颜色变为蓝色, 像这样
直播应用就在这里:https://i2a.herokuapp.com/app/questionnaire/create/
在safari中,该选项不会作为按钮出现,但在Chrome中它会以按钮形式出现
有人可以帮我解决这个问题吗?谢谢。
答案 0 :(得分:0)
在您的代码中,第一个条件将始终为true,因为.btn
将始终位于元素上。试试这个:
$(document).ready(function () {
$(".form-control option").click(function () {
$(this).toggleClass('btn-success');
$(this).toggleClass('btn-default');
}
);
首次点击时,它会删除.btn-default
课程并添加.btn-success
课程。第二次点击它会反过来。