我的逻辑正确吗？我正在尝试做一个下拉列表并根据所选值显示某个 <td> ？答案

【问题标题】：Is my logic correct? I'm trying to do a dropdownlist and display a certain <td> depending on the selected value?我的逻辑正确吗？我正在尝试做一个下拉列表并根据所选值显示某个 <td> ？
【发布时间】：2014-05-10 09:34:55
【问题描述】：

我有一个包含 2 个值的下拉列表 - Y（是）和 N（否）。如果我选择值“Y”，则会显示某个<td>，但我无法实现该结果。我的代码有什么问题？到目前为止我只能隐藏它。

这是我的 asp.net 代码

        <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>

这是我的 jQuery 代码

$(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();
        }
    });

【问题讨论】：

使用组合的客户端 ID 或使用 $("select[id$=DDL]").val();
你好，什么是 asp:ListItem ？

标签： jquery asp.net select selecteditem

【解决方案1】：

在更改所选项目时使用更改

$(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/

【讨论】：

【解决方案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();
            }
        });

在下拉列表控件中使用 ClientID，因为它是服务器控件。

【讨论】：

【解决方案3】：

使用<%=ddlMail.ClientID%> 或更好

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

【讨论】：

【解决方案4】：

您可以使用ClientID检索下拉列表的id：

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

您还需要获取所选选项的值，而不是文本，因此您可以使用：

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

代替：

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

最终代码如下：

$(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();
    }
});

【讨论】：

它工作，还挺不错的。我必须选择“Y”（是）并重新加载页面并出现 td。知道如何解决这个问题吗？
我不确定，但我不断得到这个：reflow: 0ms function Sys.UI.DomElement.getLocation, ScriptResource.axd line 1293

【解决方案5】：

您的下拉菜单会在时间或渲染时更改 id，因此您应该使用 clientId 或 classname 来引用下拉菜单。如果您为该下拉菜单提供类名，您的代码应如下所示

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

});

HTML

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

【讨论】：