select2清空选择框

初始状态:

用户选择后:

当我们需要清空这个选择框的内容该怎么办

通过$('#subject').val("")可以将select2的选择框内的val清空，但是在页面上显示的仍然是原有的内容(998(1.1版))，并不会回到初始状态，这样看上去就不太对

然后通过控制台发现选择框内的信息是显示在select2-subject-container这个id下的，在用户选择完之后，他会默认将选择的显示信息加在这个id下面<span>998(1.1版)</span>

所以在将val清空之后显示信息并没有改变

那我们就将select2-subject-container下的信息清空

$("#select2-subject-container").attr("title","");
$("#select2-subject-container").empty();

这样选择框上显示的就是空白了，但是感觉还是怪怪的，因为原来有浅灰色的字写着请选择名称

那就在清空后我们再将这句话加回去

var str=$("<span class='select2-selection__placeholder'>请选择名称</span>");

$("#select2-subject-container").prepend(str);

这样就回到了初始状态了，目前我想到的方法比较简单粗暴，但是用用挺好的

所有代码：

var str=$("<span class='select2-selection__placeholder'>请选择名称</span>");

$('#subject').val("");

$("#select2-subject-container").attr("title","");

$("#select2-subject-container").prepend(str);
$("#select2-subject-container").empty();