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>

Sorry, the item is not removed from the list, I used .hide(); did not work either — Mindan
– Mindan, Commented Jul 3, 2017 at 10:54
please create a fiddle example of your problem so that we can rectify that and let you know — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Jul 3, 2017 at 10:55
try this $("#ContentPlaceHolder1_ddlGxP option[value='3']").remove(); — Krishna
– Krishna, Commented Jul 3, 2017 at 10:58
you should remove AutoPostBack="true" otherwise it will post back after you remove — Krishna
– Krishna, Commented Jul 3, 2017 at 13:09

Stan Shaw · Accepted Answer · 2017-07-03 14:56:13Z

0

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.

answered Jul 3, 2017 at 14:56

Stan Shaw

3,0541 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove item from dropdown list ASP .NET using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related