Liste déroulante désactivée ne fonctionnant pas (autopostback & mise à jour liée à l'écran) C# asp.net

Question

Après avoir choisi un deuxième élément de liste. La "Select Category ..." pour la 3ème liste déroulante n'est plus désactivée, elle devient cliquable/sélectionnable.

Le "Select Category ..." doit rester désactivé dans toutes les listes déroulantes. Je pense que cela a quelque chose à voir avec Autopostback et UpdatePanel. parce que j'ai utilisé updatepanel pour garder le modal ouvert lorsque postbackback et j'ai utilisé Autopostback pour supprimer l'élément sélectionné de la liste déroulante.

Ceci est mon 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> 

Mon code derrière .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

Ce n'est pas sur votre panneau de mise à jour (je l'ai testé). Je pense que c'est un mauvais comportement (ou un bug) de la liste déroulante que lorsque vous supprimez son élément, sélectionnez son premier élément et supprimez ce handicap. Pour résoudre ce problème, vous pouvez facilement ajouter cette jquery à la fin de vos codes:

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

Et si vous ne voulez pas utiliser jquery, coller ce script après 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>