DropdownList, an ASP.NET tool, requires AutoPostback in order to trigger the SelectedIndexChanged event. I have customized your issue and the easiest solution is to incorporate an update panel that encompasses both the DropdownList and Label:

ASPX Code:

<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Label ID="myLabelMid" runat="server" CssClass="professorname" Text="test"/> 
        <asp:DropdownList runat="server" ID="ddlAvailability1" AutoPostBack="true" OnSelectedIndexChanged="ddlAvailability1_SelectedIndexChanged" CssClass="dropdowns">
            <asp:ListItem ID="LT1" Text="yes"></asp:ListItem>
            <asp:ListItem ID="RT1" Text="no"></asp:ListItem>
        </asp:DropdownList>
    </ContentTemplate>
</asp:UpdatePanel>

C# Code:

protected void ddlAvailability1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (ddlAvailability1.SelectedValue == "no") { myLabelMid.CssClass = "redtext"; }
    else { myLabelMid.CssClass = "professorname";}
}

I believe achieving the same functionality through JavaScript is feasible but it involves a more complex approach with an ASP.NET control, as you would need to perform validation in your function after the PostBack completes. This can be accomplished using

Sys.WebForms.PageRequestManager.getInstance()

Your code has a few issues that need to be addressed.

When using OnSelectedIndexChanged, keep in mind that the DDL will trigger a PostBack and any DOM changes made with jQuery will be lost. To mitigate this, bind data inside an IsPostBack check when using this method.

Additionally, I noticed that there is no mention of False in your code snippet. Remember that a ListItem is either selected or not based on its value, rather than a yes/no state.

It's worth noting that a ListItem does not possess an ID property.

Below is a sample snippet demonstrating a jQuery text color change. Choose either one approach for changing text color, as they should not be used simultaneously.

<asp:DropDownList runat="server" ID="ddlAvailability1" CssClass="dropdowns">
    <asp:ListItem Value="">Select a Professor</asp:ListItem>
    <asp:ListItem Value="LT1">Professor LT1</asp:ListItem>
    <asp:ListItem Value="LT2">Professor LT2</asp:ListItem>
    <asp:ListItem Value="LT3">Professor LT4</asp:ListItem>
</asp:DropDownList>

<script>
    //changes text color to red upon ddl change
    $('.dropdowns').bind('change', function () {
        $(this).addClass('redtext');
    });

    //changes text color to red if non-default item is selected, otherwise becomes black
    $('.dropdowns').bind('change', function () {
        if ($(this).prop('selectedIndex') !== 0) {
            $(this).addClass('redtext');
        } else {
            $(this).removeClass('redtext');
        }
    });
</script>

<style>
    .dropdowns {
        color: black;
    }

    .redtext {
        color: red;
    }
</style>

VDWWD's response highlighted key issues with your code. Another important suggestion is to incorporate the AssociatedControlId attribute in your labels to establish the correct association between the label and dropdown elements. This will automatically add the for attribute to your labels, which can be advantageous when working with javascript functionalities.

A hypothetical implementation could resemble the following structure:

<!-- Notice the insertion of the AssociatedControlId attribute along with 
     the removal of OnSelectedIndexChange and AutoPostback attributes -->
<div>
    <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Image ID="img1" runat="server" height="20" width="20" CssClass="providericon"/><sup><asp:Label ID="myLabel" runat="server" Font-Size="20px" CssClass="oval" /></sup> 
                <asp:Label ID="myLabelMid" runat="server" CssClass="professorname" AssociatedControlId="ddlAvailability1" />
                <asp:DropdownList runat="server" id="ddlAvailability1" CssClass="dropdowns">
                    <asp:ListItem value="true">Yes</asp:ListItem>
                    <asp:ListItem value="false">No</asp:ListItem>
                </asp:DropdownList>
            </ContentTemplate>
        </asp:UpdatePanel>          
</div>
        
<asp:Panel ID="row2" runat="server" Visible="false">
    <%--<asp:ScriptManager runat="server"></asp:ScriptManager>--%>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Image ID="img2" runat="server" CssClass="professoricon"/><sup><asp:Label ID="L2" runat="server" Font-Size="20px" CssClass="oval"/></sup> <asp:Label ID="M2" runat="server" CssClass="professorname" AssociatedControlId="ddlAvailability1"/> 
            <asp:DropdownList runat="server" id="ddlAvailability2" CssClass="dropdowns">
                    <asp:ListItem value="true">Yes</asp:ListItem>
                    <asp:ListItem value="false">No</asp:ListItem>
            </asp:DropdownList>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>   

Javascript Section

let dropdowns = document.querySelectorAll(".dropdowns");
//Add Event Listeners
for(var i = 0; i < dropdowns.length; i++) {
   dropdowns[i].addEventListener("change", function() {
      //Find labels associated with control
      let labels = document.querySelectorAll("[for=" + this.id +"]");
      //toggle the redtext class on labels based on the selected value
      for(var j = 0; j < labels.length; j++) {
         labels[0].classList.toggle("redtext", this.value === "true");
      }
      //NOTE: if you know each dropdown only has one label
      //      use document.querySelectorAll and skip the loop
      //      document.querySelector("[for=" + this.id +"]").classList.toggle("redtext", this.value === "false");
   })
}

Important: Please bear in mind that this code remains untested, and some debugging may be necessary. However, it should help point you in the right direction. Also, consider jQuery as an alternative if it aligns with your existing setup.