Is my logic correct? I'm trying to do a dropdownlist and display a certain <td> depending on the selected value?

Question

I have a dropdownlist that has 2 values - Y (Yes) and N (No). If I would select the value "Y", a certain <td> will show, but I am unable to achieve that result. What's wrong with my code? So far I can only hide it.

Here's my asp.net code

        <tr class="inputRows">
            <td class="colHead">Mailing</td>
            <td>
                <asp:DropDownList ID="ddlMail" runat="server">
                    <asp:ListItem Selected="True" Value="empty">- - -</asp:ListItem>
                    <asp:ListItem Value="Y">Yes</asp:ListItem>
                    <asp:ListItem Value="N">No</asp:ListItem>
                </asp:DropDownList>
            </td>

            <td class="colHead" id="lblC">Carrier</td>
            <td id="ddlC">
                <asp:DropDownList ID="ddlCarrier" runat="server">
                    <asp:ListItem Selected="True" Value="empty">- - -</asp:ListItem>
                    <asp:ListItem Value="Dlv">Delivery</asp:ListItem>
                    <asp:ListItem Value="Pck">Pick-up</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>

And here's my jQuery code

$(document).ready(function () {
        $('#lblC').hide();
        $('#ddlC').hide();

        var i = document.getElementById("ddlMail");
        var value = i.options[i.selectedIndex].text;

        if (value == "Y") {
            $('#lblC').show();
            $('#ddlC').show();
        }
    });

Answer 1

use change when you change the selected item and

$(document).ready(function () {    
    change($("#ddlMail"));

    $("#ddlMail").change(function () {
       change($(this));
    });    
});

function change(obj){
    if ($(obj).val() == "Y") {
        $('#lblC').show();
        $('#ddlC').show();
    }
    else{
        $('#lblC').hide();
        $('#ddlC').hide();
    } 
}

http://jsfiddle.net/JNPU8/

Answer 2

    $(document).ready(function () {
            $('#lblC').hide();
            $('#ddlC').hide();

            var i = document.getElementById("<%=ddlMail.ClientID%>")
            var value = i.options[i.selectedIndex].value;

            if (value == "Y") {
                $('#lblC').show();
                $('#ddlC').show();
            }
        });

Use ClientID in dropdownlist control because it is server control.

Answer 3

Use <%=ddlMail.ClientID%> or better

 $("select[id$=ddlMail]").val();

Answer 4

You can retrieve the id of your dropdown list using ClientID:

var i = document.getElementById("<%=ddlMail.ClientID%>")

Also you need to get the value of selected option, not the text, so you can use:

var value = i.options[i.selectedIndex].value;

instead of:

var value = i.options[i.selectedIndex].text;

Final code look like:

$(document).ready(function () {
    $('#lblC').hide();
    $('#ddlC').hide();

    var i = document.getElementById("<%=ddlMail.ClientID%>");
    var value = i.options[i.selectedIndex].value;

    if (value == "Y") {
        $('#lblC').show();
        $('#ddlC').show();
    }
});

Answer 5

Your dropdown will change the id ath the time or rendering, So you should refer the dropdown either using clientId or a classname. If you give a class name to that dropdown, your code should look like

$(".ddlCarrier").change(function () {
    if ($(this).val() == "Y") {
        $('#lblC').show();
        $('#ddlC').show();
    }

});

Html

<asp:DropDownList ID="ddlCarrier" class="ddlCarrier" runat="server">