javascript - 禁用选择器中的选项，使其无法删除

Question

我有一个看起来像这样的选择器:

<select id="patientSelect">
    <option disabled selected style='display: none;' id="patient0">
        Incoming Patients</option>
    <option id="patient1"></option>
    <option id="patient2"></option>
</select>

因为我有点想要选择器的占位符类型文本(即第一个选项)。使用我的 javascript 我想要它，这样如果选择的选项是 patient1 并且您单击了一个按钮，它将被删除并返回显示禁用的“传入患者”的东西。 javascript:

$(".ui-btn").click(function(){
   remove();
   $('#patientSelect :selected').attr('selected', '0');
   $('#patientSelect').change();
});

function remove(){
   var x = document.getElementById("patientSelect");
   x.remove(x.selectedIndex);
}

问题是它总是删除超过 1 个选项，所以如果我删除“patient2”并尝试运行 remove()，列表就会变成一个长长的空白列表。感谢所有帮助，请不要太苛刻。 :P

编辑抱歉，基本上我希望永不删除文本“Incoming Patients”(这是我的选择器的第一个选项)。无论“function remove()”尝试运行多少次。它可以很好地删除其他选项，但永远不会删除第一个选项。这甚至可能是不可能的，我不确定..如果有另一种方法可以在没有选项的情况下将文本添加到选择器上，那也很好:-)

也许是这样的:

function remove(){
   if(option != 1){
      var x = document.getElementById("patientSelect");
      x.remove(x.selectedIndex);
   }
}

Answer 1

尝试

var $ps = $('#patientSelect');
$(".ui-btn").click(function () {
    var $sel = $ps.find('option:selected')
    if ($sel.index() > 0) {
        $sel.remove();
        $ps.val($ps.find('option:eq(0)').val())
    }
});

演示:Fiddle