禁用的下拉列表不起作用（与autopostback和updatepanel相关）C＃asp.net

Question

After choosing a 2nd list item. The "Select Category..." for the 3rd drop down list is not disabled any more it became clickable/selectable.

The "Select Category..." should remain disabled in all drop down list.

I think it has something to do with Autopostback and UpdatePanel. because I used updatepanel to keep the modal open when postingback and I used Autopostback to remove the selected item from drop down list.

This is my code:

<form class="form-horizontal" runat="server">
 <asp:ScriptManager runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Conditional">
                <ContentTemplate>
           <div class="modal-body">

<div class="form-group">
                            <div class="col-lg-10">
                            <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-user"></i></div>
                            <asp:DropDownList ID="ddl1" runat="server" class="form-control" MaxLength="50" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" AutoPostBack="true" required >
                            <asp:ListItem Value="" disabled="disabled">Select Category...</asp:ListItem>
                            <asp:ListItem>Artist/Curator</asp:ListItem>
                            <asp:ListItem>MCAD Exhibitor</asp:ListItem>
                            <asp:ListItem>Student</asp:ListItem>
                            <asp:ListItem>Collector/Buyer</asp:ListItem>

                            </asp:DropDownList>
                            </div>
                            </div>
                            </div>


                           <div class="form-group">
                            <div class="col-lg-10">
                            <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-user"></i></div>
                            <asp:DropDownList ID="ddl2" runat="server" class="form-control" MaxLength="50" OnSelectedIndexChanged="ddl2_SelectedIndexChanged"  AutoPostBack="true" required >
                            <asp:ListItem Value="" disabled="disabled">Select Category...</asp:ListItem>
                            <asp:ListItem>Artist/Curator</asp:ListItem>
                            <asp:ListItem>MCAD Exhibitor</asp:ListItem>
                            <asp:ListItem>Student</asp:ListItem>
                            <asp:ListItem>Collector/Buyer</asp:ListItem>

                            </asp:DropDownList>
                            </div>
                            </div>
                            </div>

                          <div class="form-group">
                            <div class="col-lg-10">
                            <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-user"></i></div>
                            <asp:DropDownList ID="ddl3" runat="server" class="form-control" MaxLength="50" OnSelectedIndexChanged="ddl3_SelectedIndexChanged" AutoPostBack="true" required >
                            <asp:ListItem Value="" disabled="disabled">Select Category...</asp:ListItem>
                            <asp:ListItem>Artist/Curator</asp:ListItem>
                            <asp:ListItem>MCAD Exhibitor</asp:ListItem>
                            <asp:ListItem>Student</asp:ListItem>
                            <asp:ListItem>Collector/Buyer</asp:ListItem>

                            </asp:DropDownList>
                            </div>
                            </div>
                            </div>
</div>
                    </ContentTemplate>
                    </asp:UpdatePanel>
</form>

My code behind .cs:

protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
    {
        ddl2.Items.Remove(ddl1.SelectedItem);
        ddl3.Items.Remove(ddl1.SelectedItem);

        UpdatePanel1.Update();


    }

    protected void ddl2_SelectedIndexChanged(object sender, EventArgs e)
    {
        ddl1.Items.Remove(ddl2.SelectedItem);
        ddl3.Items.Remove(ddl2.SelectedItem);

        UpdatePanel1.Update();



    }

    protected void ddl3_SelectedIndexChanged(object sender, EventArgs e)
    {
        ddl1.Items.Remove(ddl3.SelectedItem);
        ddl2.Items.Remove(ddl3.SelectedItem);

        UpdatePanel1.Update();

    }

Answer 1

This is not about your update panel(I tested). I think this is a bad behavior (or a bug) of drop down list that when you remove its item it select its first item and remove that disability. To solve this problem you can easily add this jquery to end of your codes:

  $('select').each(function ()
  {
       $(this).children().eq(0).attr('disabled', 'disabled');
  });

And if you do not want to use jquery, paste this script after yout dropdowns:

<script>
  var arr = document.getElementsByClassName('form-control');
        for (var i = 0; i < arr.length; i++)
        {
            console.log(arr[i]);
            arr[i].children[0].setAttribute('disabled', 'disabled');
        }
</script>