Remove a dropdown option once it's selected

Question

I have a requirement that seeks to remove a sharepoint dropdown option if selected and when you click the save button the option selected needs to get removed from the dropdown menu.

here's my jquery code:

$(document).ready(function(){

removeItems();

});

function removeItems() {

$("#ctl00_m_g_080195fc_7520_4906_a7d3_7f90b10d5b73_ctl00_toolBarTbl_RightRptControls_SaveButton2_ctl00_diidIOSaveItem").click(function(){

var selectedItem = $("#ctl00_m_g_080195fc_7520_4906_a7d3_7f90b10d5b73_ctl00_CustomFieldIterator1_ctl02_ctl00_ctl00_ctl04_ctl00_DropDownChoice option:selected").val();
alert(selectedItem+" is removed from the dropdown options.");
  $("#ctl00_m_g_080195fc_7520_4906_a7d3_7f90b10d5b73_ctl00_CustomFieldIterator1_ctl02_ctl00_ctl00_ctl04_ctl00_DropDownChoice option:selected").remove();

});

}

this seems to work when saving the form but when I load the form again the option loads again. Anyone with help??

Answer 1

 $("#ctl00_m_g_080195fc_7520_4906_a7d3_7f90b10d5b73_ctl00_CustomFieldIterator1_ctl02_ctl00_ctl00_ctl04_ctl00_DropDownChoice option:selected").remove();

Above line will only remove data from loaded DOM (Client browser).

To remove from SharePoint dropdown value,

var categoryField = cldList.get_fields().getByInternalNameOrTitle("Category");
var categoryChoiceField = context.castTo(categoryField, SP.FieldChoice);
context.load(categoryChoiceField);

context.executeQueryAsync(function () {
        var categoryChoices = categoryChoiceField.get_choices();

          //now your logic
          //var i=categoryChoices.indexOf(SelectedValue);
          //categoryChoices.splice(i, 1);
            categoryChoiceField.set_choices(categoryChoices);
            categoryChoiceField.updateAndPushChanges();
            context.executeQueryAsync(function () { }, function () { });

    }, function () { }); 

Answer 2

I just ran into this issue, too. I only had problems with one document file that I needed to deselect the dropdown value, so I did it directly in the browser's console. Here's what I did:

1. open the edit form where the dropdown is located.

2. F12 - get the element Id.

3. Go to "console" and run this, and then save the form:

        var removeValue = document.getElementById("Id from step 2");
   
        $(removeValue).val(" ");