jQueryを使用して、選択ボックスで既に選択されているオプションを無効にする必要があります。次のようにグレー表示にしたいです。asmselect。
私の例をテストするここ。
//JS
$("#theSelect").change(function(){
var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);
theDiv.slideDown().removeClass("hidden");
});
$("div a.remove").click(function () {
$(this).parent().slideUp(function() { $(this).addClass("hidden"); });
});
//HTML
<body>
<div class="selectContainer">
<select id="theSelect">
<option value="">- Select -</option>
<option value="Patient">Patient</option>
<option value="Physician">Physician</option>
<option value="Nurse">Nurse</option>
</select>
</div>
<div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Patient">remove</a></div>
</body>
更新しました: これが完成したソリューションパトリックとシメンに感謝します。
ベストアンサー1
changeイベントハンドラにこの行を追加します
$("#theSelect option:selected").attr('disabled','disabled')
.siblings().removeAttr('disabled');
これにより、選択したオプションが無効になり、以前に無効にされていたオプションが有効になります。
編集：
以前のものを再度有効にしたくない場合は、行のこの部分を削除するだけです。
.siblings().removeAttr('disabled');
編集：
削除をクリックしたときに再度有効にするには、クリック ハンドラーにこれを追加します。
$("#theSelect option[value=" + value + "]").removeAttr('disabled');