jQuery根据以前的选择删除和​​添加下拉选项

Question

我已经阅读了许多尝试使用.hide（）和.show（）解决此问题的帖子，但我在Safari和Chrome上遇到了问题，所以我真的在寻找一个适用于所有人的解决方案浏览器（听起来像删除和追加是可行的方式，但我无法弄清楚如何使其工作）。

基本上我有3个相同选项/值的下拉菜单：

<select class="rating">
    <option value=""></option>
    <option value="1">1 Star</option>
    <option value="2">2 Star</option>
    <option value="3">3 Star</option>
</select>

<select class="rating">
    <option value=""></option>
    <option value="1">1 Star</option>
    <option value="2">2 Star</option>
    <option value="3">3 Star</option>
</select>

<select class="rating">
    <option value=""></option>
    <option value="1">1 Star</option>
    <option value="2">2 Star</option>
    <option value="3">3 Star</option>
</select>

如果＆＃34; 1 Star＆＃34;从第一个下拉列表中选择我希望它从后两个下拉列表中删除，只留下两个选项。如果＆＃34; 3 Star＆＃34;然后从第二个下拉列表中选择，最后一个应该只剩下一个选项。下面的jQuery在Firefox上运行得很完美，但我需要它在所有浏览器上工作，而不是.hide（）和.show（）我认为需要根据所做的选择删除和​​添加回来。

$("select.rating").change(function () {
    $("select.rating option[value='" + $(this).data('index') + "']").show();
    $(this).data('index', this.value);
    $("select.rating option[value='" + this.value + "']:not([value=''])").hide();
    $(this).find("option[value='" + this.value + "']:not([value=''])").show();
});

非常感谢帮助！