c# - ASP.NET dropdownlist selectedIndexChanged not getting triggered

Question

I am trying to create a form as part of a website. In the form the user is shown a dropdownlist with serveral options. If the user chooses the "Other" option, then they should be presented with a text box to fill the description of the "other" choice.

My idea was to hide the div that contains the text box and enable it when the user changes the dropdown list choice to "other".

I am having an issue where in asp.net the dropdownlist "selectedindexchanged" event is not being triggered. Below is the HTML code and the cs code.

<%@ Page Title="" Language="C#" MasterPageFile="~/master/Site1.Master" AutoEventWireup="true" CodeBehind="form.aspx.cs" Inherits="Project.forms.form" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="menu" runat="server">
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="Banner" runat="server">
        <img src="../../image.jpg" class="img-responsive" alt="Responsive image" />
    </asp:Content>
    <asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    </asp:Content>
    <asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
         
      <h2 class="branding_orange">Form</h2>
        <div class="alert alert-danger" name="warningDiv" style="margin-top:10px" id="warningDiv" role="alert" runat="server">
            <p name="warningMsg" id="warningMsg" runat="server"></p>
        </div>
      <form id="compliantForm" role="form" class="form" runat="server" data-toggle="validator" onsubmit="return validation();">
          <div class="row">
               .
               .
               .
              <div class="col-xs-12 col-sm-6 col-md-4">
                  <div class="form-group">
                       <label for="person-submitting-select">Is the person submitting this complaint an: <b style="color:red">*</b></label>&nbsp;
                     <asp:DropDownList ID="cboPersonSubmitting" runat="server" AutoPostBack = "True" OnSelectedIndexChanged = "OnSelectedIndexChanged">
                        <asp:ListItem Text="select" Value="0" />
                        <asp:ListItem Text="Employee" Value="1" />
                        <asp:ListItem Text="Customer" Value="2" />
                        <asp:ListItem Text="Other" Value="3" />
                    </asp:DropDownList>
    
                  </div>
    
              </div>
    .
    .
    .
    .
        
    </asp:Content>
    
    <asp:Content ID="Content6" ContentPlaceHolderID="ContentPlaceHolder3" runat="server">
    </asp:Content>

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;


namespace Project.forms
{
    public partial class form : System.Web.UI.Page
    {
        
        protected void Page_Load(object sender, EventArgs e)
        {
            cboPersonSubmitting.AutoPostBack = true;
            warningDiv.Visible = false;
            warningMsg.InnerHtml = "";
            
            
        }
        .
        .
        .

        protected void OnSelectedIndexChanged(object sender, EventArgs e)
        {
            if (cboPersonSubmitting.SelectedIndex == 3)
            {
                whoSubmittingDiv.Visible = true;
            }
            else
            {
                whoSubmittingDiv.Visible = false;
            }
        }
    }
}

Answer 1

Based on my test, you can try the following code to show textbox when you choose Other in the dropdownlist.

Html:

 <form id="form1" runat="server">
        <div class="col-xs-12 col-sm-6 col-md-4">
                  <div class="form-group">
                       <label for="person-submitting-select">Is the person submitting this complaint an: <b style="color:red">*</b></label>&nbsp;
                     <asp:DropDownList ID="cboPersonSubmitting" runat="server" AutoPostBack = "True" OnSelectedIndexChanged="cboPersonSubmitting_SelectedIndexChanged">
                        <asp:ListItem Text="select" Value="0" />
                        <asp:ListItem Text="Employee" Value="1" />
                        <asp:ListItem Text="Customer" Value="2" />
                        <asp:ListItem Text="Other" Value="3" />
                    </asp:DropDownList>
                      <div class="Submitdiv" id="thediv" runat="server" visible="false"> 
                          <asp:TextBox ID="txtInput" runat="server" ></asp:TextBox>
                      </div>
    
                  </div>
    
              </div>
    </form>

C# code:

 protected void cboPersonSubmitting_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (cboPersonSubmitting.SelectedIndex == 3)
            {
                thediv.Visible = true;
            }
            else
            {
                thediv.Visible = false;
            }
        }

Result: