Remove item from dropdown list ASP .NET using jQuery

Question

I implemented two dropdown lists in ASP .NET, however I use jQuery to do some checks on client side, Here is the scenario: user select an option from ddl1 and then when select a particular item from ddl2 one item in ddl1 should be removed or disabled and the user will be notified. Below jQuery code: In ASP .NET I use "Onchange" to call the method

    var myTest = function () {
        var val1 = $('#ContentPlaceHolder1_ddlGxP').val();
        var val2 = $('#ContentPlaceHolder1_ddlFinalizedMethod').val();
        console.log('glpvalue: ' + val1);
        console.log('finalizedmethod: ' + val2);
        if (val1 === '3' && val2 === '2') {
            //  document.getElementById('<%=txtComments.ClientID%>').value = "!Please Insert another GLP Method.";
            $("#ContentPlaceHolder1_ddlGxP[value='3']").remove();
            $("#ContentPlaceHolder1_RequiredFieldValidator10").css({"visibility": "visible", "color": "red"});

            //alert('! Please select another GxP Standard');
            $(':input[type="submit"]').prop('disabled', true);

        }
        else {
            $(':input[type="submit"]').prop('disabled', false);
            $("#ContentPlaceHolder1_ddlGxP[value='3']").remove();
            $("#ContentPlaceHolder1_RequiredFieldValidator10").css({ "visibility": "hidden", "color": "red" });
        }

The problem is the item i ddl1 is not removed.

The implementation of ddl1

 <div>
        <asp:Label ID="Label2" runat="server" CssClass="stdLabel">GxP standard <span class="mandatory"> *</span></asp:Label>
if (userRole == ("Administrator") ||


<asp:DropDownList ID="ddlGxP" runat="server" CssClass="stdDropdownSmall" OnSelectedIndexChanged="ddlGxP_SelectedIndexChanged" AutoPostBack="true" />
        <asp:RequiredFieldValidator ID="RFVddlGxP" runat="server" ControlToValidate="ddlGxP" InitialValue="0" CssClass="RequiredFieldError" ErrorMessage=" ! Please insert"  />

  else
  <asp:TextBox ID="txtGxPDisabled" runat="server" CssClass="stdTextboxSmallDisabled" Enabled="false" />
     } 
</div>

Implementation of ddl2

    <div>
         if (!string.IsNullOrEmpty(txtFinalized.Text))
           {
             <asp:Label ID="Label23" runat="server" CssClass="stdLabel">Finalized Method<span class="mandatory"> *</span></asp:Label>
         <%}
           else
           {
               <asp:Label ID="Label17" runat="server" CssClass="stdLabel">Finalized Method </asp:Label>

        }  

if (userRole == ("Administrator") ||
      userRole == ("Expert") ||
      (userRole == ("User") && (txtOwner.Text == "" || txtOwner.Text.ToUpper() == userName.ToUpper())))
  {

        <asp:DropDownList ID="ddlFinalizedMethod" runat="server" CssClass="stdDropdown" OnSelectedIndexChanged="ddlGxP_SelectedIndexChanged" AutoPostBack="true" onchange="myTest()" />

          <asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server" ControlToValidate="ddlFinalizedMethod" InitialValue="0" CssClass="RequiredFieldError" ErrorMessage=" !Please select another Standard"  />



         }
  else  
  {
        <asp:TextBox ID="txtFinalizedMethodDisabled" runat="server" CssClass="stdTextboxSmallDisabled" Enabled="false" />
    } 
</div>

Answer 1

Your problem is that you're removing the option on the client side, but you're auto-posting back the entire form - so once your server side code renders the control, it has all of the original elements. If you want the change to persist, the server will need to become aware of the changes done on the client side - OR you will have to manage everything on the server side.