選擇選項文本消失添加CSS類

Question

$("button").on("click", function() { 
 
\t $("select option").each(function() { 
 
    \t $(this).addClass("heavyError"); 
 
    }); 
 
    $("select option:selected").attr("selected", false); 
 
});

.heavyError { 
 
    color: red; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select style="width:480px; height:100px;" multiple> 
 
<option value="test-ss">test-ss</option> 
 
</select> 
 
<button>test</button>

如果在IE中運行此部分後，該文本被用連字符切斷，但是，它在Chrome中正常工作。不知道這裏發生了什麼。這是一個IE瀏覽器或某種類型的錯誤？

Answer 1

將' '附加到select將強制選擇「刷新」，並修復IE11中的問題。在這裏看到：https://jsfiddle.net/9kvcqc05/

$("button").on("click", function() { 
 
\t $("select option").each(function() { 
 
    \t $(this).addClass("heavyError"); 
 
    }); 
 
    
 
    $("select option:selected").attr("selected", false); 
 
    $("select").append(' '); 
 
});

.heavyError { 
 
    color: red; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select style="width:480px; height:100px;" multiple> 
 
<option value="test-ss">test-ss</option> 
 
</select> 
 
<button>test</button>

看來這僅僅是一個奇怪的IE特有的錯誤。

我通過參考Jordan Gray的this great answer解決了這個問題。

Answer 2

我能想到的最好方法是IE試圖換行連字符上的選項文字，因爲粗體樣式增加了寬度。

下面是用較長的文字一個例子：

$("button").on("click", function() { 
 
    $("select option").each(function() { 
 
    $(this).addClass("heavyError"); 
 
    }); 
 
});

.heavyError { 
 
    color: red; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select style="width:480px; height:100px;" multiple> 
 
    <option value="test-ss">test-loremipsum</option> 
 
</select> 
 
<button>test</button>

速戰速決是一個空間追加到元素：

$("button").on("click", function() { 
 
    $("select option").each(function() { 
 
    $(this).text($(this).text() + ' '); 
 
    $(this).addClass("heavyError"); 
 
    }); 
 
});

.heavyError { 
 
    color: red; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select style="width:480px; height:100px;" multiple> 
 
    <option value="test-ss">test-loremipsum</option> 
 
</select> 
 
<button>test</button>