选择选项文本消失添加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>